[react] Rules of JSX

react 공식문서를 보며 JSX에 대한 기본 룰을 발견하여 정리하여본다.

1. Return a single root element

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo">
  <ul>
    ...
  </ul>
</div>

기본적으로 vue2의 template와 같다.
하나의 root element만을 가질 수 있다.

여러개의 element를 사용하지만 추가적인 div등으로 감싸고싶지 않은 경우에는 <></>를 활용할 수 있디.

<>
  <h1>Hedy Lamarr's Todos</h1>
  <ul>
    ...
  </ul>
</>

2. Close all the tags

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  />
  <ul>
    ...
  </ul>
</div>

JSX에서 태그는 반드시 명시적으로 닫혀야한다.

1.의 예시에서 img태그가 닫혀있지않았지만, 실제로 JSX에서는 닫아줘야한다.

3. camelCase most of the things!

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

react에서 HTML과 SVG 속성값은 camelCase를 이용하여 작성한다.
예를 들어 calss 속성은 예약어이므로 className로 대체하여 작성한다.

예외

aria-*와 data-* 속성들은 기존에 작성하던 오래된 방식이므로, -를 이용해여 작성한다.