JSX에 대해 알아보자

1. JSX란

JSX는 JavaScript를 확장한 문법으로, JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며 대부분의 코드 베이스에서 JSX를 사용합니다.

https://ko.react.dev/learn/writing-markup-with-jsx

JSX로 마크업 작성하기 – React

 

그러나 JSX는 HTML보다 엄격한 규칙을 가지고 있기 때문에 다음 규칙(가이드)를 따라야한다!

 

2. JSX 규칙

2.1 하나의 루트 엘리먼트로 반환하기

한 컴포넌트에서 여러 엘리먼트를 반환하려면, 꼭 하나의 상위 부모 태그로 감싸야한다.

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

이런 코드가 있으면 꼭 다음과 같이 부모 태그로 감싸야한다.

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

// <div><div/> 대신 <></>를 사용할 수 도 있다.

 

꼭 하나의 부모 태크고 감싸야 하는 이유!

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

 

2.2 모든 태그는 닫아주자.

나는 항상 습관처럼 태그를 연다면 닫는 태그를 항상 사용한다.

HTML에서 닫는 태그가 없어도 잘 동작하지만 JSX는 그러면 안된다.

 

2.3 대부분 캐멀 케이스로

JSX가 JavaScript로 바뀔 때, 작성된 어트리뷰트(속성)은 JavaScripty 객체의 Key가 된다.

종종 컴포넌트에서 해당 어트리뷰트를 변수로 읽으려는 경우가 있고 JavaScript에는 예약어나 다른 변수명에 제약이 있으므로 이를 방지하지 위해 캐멀케이스로 작성한다.

 

ex class="" 가 아닌 className="" 을 사용하는 이유

 

3. React 공식 문서 JSX 마크업 챌린지

다음 React 공식 문서에서 간단한 챌린지로 위 내용을 쉽게 익혀볼 수 있다.!

https://ko.react.dev/learn/writing-markup-with-jsx#challenges

JSX로 마크업 작성하기 – React