[REACT] JSX란 - 공식 문서랑 같이 공부하기 시리즈4

JSX란? 

Javascript를 확장한 문법으로 Javascript 파일 안에 HTML과 유사한 마크업을 작성할 수 있다.

리액트에서 렌더링 로직과 마크업이 같은 위치에 있는 이유

전통적인 웹은 HTML, CSS, Javascript로 이루어져 있고 HTML은 컨텐츠, CSS는 디자인, Javascript로는 로직을 작성해 보통은 분리된 파일로 관리를 해왔다.

하지만 웹이 동적인 환경으로 변화하면서 로직이 컨텐츠를 결정하는 경우가 많아졌다. 

그래서! 리액트에서 렌더링 로직과 마크업(컨텐츠)가 컴포넌트에 묶여 사용된다고 보면 된다.

HTML에서 JSX로 변환하기

아래는 HTML로 작성한 파일이다.

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

위 내용을 그대로 붙여 넣는다면 (아래 코드) 작동하지 않는다.

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>
  );
}

JSX에는 몇 가지 규칙이 있기 때문에 지켜줘야 한다.

1. 단일 root 요소를 반환하기.

컴포넌트에서 여러 요소를 반환하려면, 하나의 '부모 태그'로 감싸주어야 한다.

<div></div>로 감싸줄 수도 있고 <></>로 감싸줄 수도 있다. (이런 빈 태그를 Fragment라고 한다. Fragment는 브라우저 상 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 준다.)

왜 JSX 태그를 하나로 감싸주어야 할까요?

JSX는 결국 Javascript 객체로 변환된다. 따라서 하나로 감싸주지 않으면 여러 개의 객체가 반환되기 때문에 문제가 생긴다.

2. 태그는 반드시 받아야 한다.

<img> 태그처럼 자체적으로 닫는 태그들도 <img />와 같이 명시적으로 닫아주어야 한다. 또한 <li>와 같이 짝이 있는 태그도 </li>를 작성해주어야 한다.

3. 속성은 카멜 케이스로 작성해준다. 

일단 class라는 속성은 예약어이기 때문에 className으로 써준다.

하지만 aria-*와 data-* 속성은 대시를 사용한다.

** HTML를 JSX로 변환하는 온라인 컨버터가 있다. (리액트 공식문서에서 추천해주는 사이트다.)

https://transform.tools/html-to-jsx

HTML to JSX