[React] JSX 문법

📌 App.js

<div><div>
<Fragment></Fragment>
<> </>

=> 세개 중에 아무거나 감싸도 된다

📎 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다는 규칙이 있기 때문에
리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 꼭 감싸주어야한다.

📌 자바스크립트 표현식

• JSX 내부에서 코드를 { }로 감싸면 된다.
• JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없다.
  조건부 연산자의 또 다른 이름은 삼항 연산자이다.

{name === '리액트' ? (<h1>리액트O</h1>) : (<h2>리액트X</h2>) }

📌 class 대신 className

JSX에서는 class가 아닌 className 으로 설정해주어야한다.

📌 꼭 닫아야하는 태그

input 이나 br 같은 태그들은 html에서는 태그 닫지 않은 상태에서도 작성하는데
JSX에서는 태그를 닫지 않으면 오류가 발생한다

<input> </input> 
<input /> : self-closing 태그