JSX: Putting markup into JavaScript

웹은 HTML, CSS, JavaScript를 기반으로 구축되었습니다. 수년 동안 웹 개발자는 콘텐츠는 HTML로, 디자인을 CSS로, 로직을 JavaScript로 유지하였고 별도의 파일로 보관했습니다.

그러나 웹이 더 상호작용적으로 변하면서 로직이 점점 더 컨텐츠를 결정하게 되었습니다. 이것이 React에서 렌더링 로직과 마크업이 같은 컴포넌트에 함께 존재하는 이유입니다.

버튼의 렌더링 로직과 마크업을 함께 유지하면 편집할 때마다 서로 동기화 상태를 유지할 수 있습니다. 반대로, 버튼의 마크업과 사이드바의 마크업과 같이 관련이 없는 세부 사항은 서로 격리되어 있으므로 둘 중 하나를 직접 변경하는 것이 더 안전합니다.

각 React 컴포넌트는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript 함수입니다. React 컴포넌트는 JSX라는 구문 확장을 사용하여 해당 마크업을 나타냅니다.

Converting HTML to JSX

아래와 같이 기존 html 마크업을 React Component에 넣으면 작동하지 않습니다.

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 spectrum technology
    </ul>
  );
}

아래와 같이 기존 html이 있는 경우 converter를 통해 수정할 수 있습니다.

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

The Rules of 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>

<div> 마크업에 추가 항목을 추가하고 싶지 않은 경우 대신 <> </>를 작성할 수 있습니다.

이러한 빈 태그를 Fragment라고 합니다. Fragment를 사용하면 브라우저 HTML 트리에 흔적을 남기지 않고 항목을 그룹화 할 수 있습니다.

🚨 여러 JSX 태그를 래핑해야 하는 이유

JSX는 HTML처럼 보이지만 내부적으로 일반 JavaScript 객체로 변환됩니다. 두 객체를 배열로 래핑하지 않고는 함수에서 두 객체를 반환할 수 없습니다. 이는 두 개의 JSX 태그를 다른 태그나 Fragment로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다.

2. Close all the tags

JSX는 태그를 명시적으로 닫아야 합니다. 자체 닫는 태그인 <img> 는 </img>로 <li>oranges는 <li>oranges</li> 로 닫아야 합니다.

예제의 이미지와 목록 항목은 다음과 같이 닫힙니다.

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

3. camelCase all most of the things!

JSX는 JavaScript로 바뀌고 JSX로 작성된 속성은 JavaScript 객체의 키가 됩니다. 자신의 컴포넌트에서 이러한 속성을 변수로 읽어들이고 싶은 경우가 많습니다. 그러나 JavaScript에는 변수 이름에 제한이 있습니다. 예를 들어, 이름에 - 를 포함하거나 class 와 같은 예약어를 사용할 수 없습니다.

이것이 React에서 많은 HTML 및 SVG 속성이 카멜케이스로 작성된 이유입니다. 예를 들어, stroke-width 대신 strokeWidth. class는 예약어이므로 React에서는 해당 DOM 속성의 className 이름을 따서 대신 작성합니다.

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

DOM component props 리스트에서 이러한 속성들을 찾을 수 있습니다.

🚨 역사적인 이유로 aria-*및 data-*속성은 -를 사용하여 HTML로 작성됩니다.

Pro-tip: Use a JSX Converter

기존 마크업에서 이러한 모든 속성을 변환하는 것은 지루할 수 있습니다. 기존 HTML 및 SVG를 JSX로 변환하려면 Converter를 사용하는 것이 좋습니다. Convert는 유용하지만 JSX를 스스로 편안하게 작성할 수 있도록 무슨 일이 일어나고 있는지 이해하는 것도 중요한 가치입니다.