React에서 사용하는 jsx란?

jsx란?

- 자바스크립트(javascript)의 확장한 문법

- jsx파일에서 자바스크립트와 HTML을 한꺼번에 작성

 

jsx 문법 

- <p>, <a>, <div> 와 같이 짝이 있는 태그들은 무조건 닫는 태그가 존재해야함

- <br/>, <img/> 와 같이 단독태그들은 무조건 태그를 닫아줘야함

 

- 컴포넌트에 여러 요소가 있다면 무조건 부모요소 하나가 감싸야함

function App(){
    return(
        <h1>요소1</h1>
        <h2>요소2</h2>
    )
}
//에러남

function App(){
    return(
    	<div>
        	<h1>요소1</h1>
        	<h2>요소2</h2>
        </div>
    )
}
//div로 감싸줘서 해결

 

-값을 중괄호{}에 넣어 관리가능

import React from 'react';

function App() {
	const name = '이름';
    return (
    <>
    	<h1>{name}</h1>
        <h2>mycode</h2>
    </>
  );
}