JSX가 무엇인가요?

JSX는 JavaScript XML의 약자로, JavaScript와 XML을 혼합하여 사용하는 문법 확장입니다. React 프레임워크에서 주로 사용되며, React 컴포넌트의 UI를 작성하기 위해 사용됩니다.

JSX는 JavaScript 코드 안에서 HTML과 유사한 구문을 작성할 수 있게 해줍니다. 이 구문은 XML과 비슷하게 보이지만, 사실은 JavaScript 코드로 변환되어 실행됩니다. JSX를 사용하면 개발자는 JavaScript 코드와 마크업 코드를 하나의 파일에 작성하여 가독성이 좋은 컴포넌트 기반 UI를 생성할 수 있습니다.

JSX의 예

예를 들어, JSX를 사용하여 React 컴포넌트를 작성하면 다음과 같이 보일 수 있습니다:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
}

위의 코드에서 <div>와 <h1>, <p>와 같은 태그는 JSX 문법을 따르며, JavaScript 코드 안에서 마크업을 표현합니다. 이렇게 작성된 JSX 코드는 Babel과 같은 도구를 사용하여 일반 JavaScript로 변환되어 실행됩니다.

JSX는 React에서 주로 사용되지만, 다른 프레임워크나 라이브러리에서도 JSX와 유사한 문법이 사용될 수 있습니다. JSX를 사용하면 JavaScript 코드와 마크업을 통합하여 작성할 수 있어 UI 개발을 더욱 편리하게 만들어줍니다.

JSX 사용 규칙

단일 루트 요소로 반환하기

컴포넌트에서 여러 요소를 반환하려면 하나의 부모 태그로 요소들을 감싸야합니다.

예를 들어, 아래와 같이 <div>를 사용할 수 있습니다.

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

만약 <div>를 사용하기 싫다면 <> </>를 사용할 수 있습니다.

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

이 빈 태그는 Fragment라고 부릅니다. Fragment는 브라우저 HTML 트리에 어떤 흔적을 남기지 않고 요소들을 감쌀 수 있게 해줍니다.

여러 JSX 태그들이 단일 요소로 감싸져야 하는 이유

JSX는 HTML과 비슷해 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 함수에서 두 개의 객체를 반환하려면 객체,배열로 감싸야 합니다. 이것이 두 개의 JSX 태그를 감싸지 않고 반환할 수 없는 이유입니다. 다른 태그나 Fragment로 감싸지 않으면 안 되는 이유도 여기에 있습니다.

모든 태그 닫기

JSX에서는 태그를 명시적으로 닫아야 합니다. <img>와 같은 자체 닫히는 태그는 <img />로 작성되어야 하며, <li>oranges와 같이 감싸는 태그는 <li>oranges</li>로 작성해야 합니다.

다음은 Hedy Lamarr의 이미지와 목록 항목이 닫힌 모습입니다.

<>
  <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>
</>

대부분의 경우 카멜케이스 사용하기

JSX는 JavaScript로 변환되며, JSX에서 작성된 속성은 JavaScript 객체의 키가 됩니다. 사용자 정의 컴포넌트에서는 종종 이러한 속성을 변수로 읽고자 합니다. 그러나 JavaScript에는 변수 이름에 제한이 있습니다. 예를 들어, 하이픈을 포함하거나 class와 같은 예약어를 변수 이름으로 사용할 수 없습니다.

이것이 React에서 많은 HTML 및 SVG 속성을 camelCase로 작성하는 이유입니다. 예를 들어, stroke-width 대신 strokeWidth를 사용합니다. 또한 class는 예약어이므로 React에서는 className을 사용하며, 이는 해당하는 DOM 속성 이름을 따온 것입니다.

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

이러한 속성들은 DOM 컴포넌트 속성의 목록에서 찾을 수 있습니다. 만약 잘못된 속성을 사용하더라도 걱정하지 마세요. React는 브라우저 콘솔에 가능한 수정 사항과 함께 메시지를 출력할 것입니다.