2. JSX 작성 규칙

JSX는 몇 가지 작성 규칙이 있음

1. 단일 루트 엘리먼트를 반환해야함

JSX는 React 컴포넌트 내에서 작성하며, 함수형 컴포넌트 방식으로 작성하기 때문에 값을 반환해야하는데, 그 값은 보통 HTML 엘리먼트를 반환함
→ 컴포넌트를 하나의 JavaScript 함수라고 보면 됨

또한 반환하는 엘리먼트는 하나의 단일한 엘리먼트를 반환해야 함


const MyCustomComponent = () => {
        return (
          <ul>
            <h2>Things cats like</h2>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        );
      };

에러가 발생하는 케이스


const MyCustomComponent = () => {
        return (
          <div>다른 엘리먼트</div>
          <ul>
            <h2>Things cats like</h2>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        );
      };

→ 최상위 엘리먼트인 루트 엘리먼트가 <div>와 <ul> 로 복수의 엘리먼트를 반환하기 때문에 에러 발생

하나의 단일 엘리먼트로 반환해야 하는 이유는 작성한 JSX 코드를 HTML 코드로 동작하도록 하기 위한 내부 변환하는 과정에서 JSX는 JavaScript 객체로 변환되는데 JS 문법 상 두 개 이상의 값을 반환할 수 없기 때문

2. Closing Tag 작성

태그에 따라 닫는 태그를 작성해주어야 함


const MyCustomComponent = () => {
        return (
          <ul>
            <img src="" alt=""> <!-- />로 태그 닫기 -->
            <h2>Things cats like</h2>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        );
      };

3. HTML Attribute는 camelCase로 작성

JSX는 JavaScript로 변환되기 때문에 일반적인 HTML Attribute는 JS 기반의 객체의 키로 동작하게 되는데, JS에서 프로퍼티 이름은 기본적으로 camelCase로 작성되어 있음


const MyCustomComponent = () => {
        return (
          <ul class=""> <!-- className으로 변경 -->
            <h2>Things cats like</h2>
            <li>Tea</li>
            <li>Milk</li>
          </ul>
        );
      };

→ class 키워드는 JS에서 예약어로 동작하기 때문에 className으로 변경하여 사용해야함