[React] JSX

 

JSX

리액트(React)에서 사용하는 JSX는 자바스크립트(JavaScript)를 확장한 문법입니다.

JSX를 사용하면 자바스크립트 코드 안에서 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다.

 

JSX의 장점

가독성: HTML과 비슷한 구문을 사용하므로, 웹 개발자가 쉽게 읽고 이해할 수 있습니다.

간결함: 복잡한 UI 구조를 간단하게 표현할 수 있습니다.

코드와 마크업 통합: 자바스크립트와 마크업을 같은 파일에 작성하여 컴포넌트 기반 개발을 쉽게 할 수 있습니다.

 

JSX: JavaScript에 마크업 넣기

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default HelloWorld;

이 코드에서 <div>와 <h1> 태그는 HTML처럼 보이지만, 실제로는 JSX 구문입니다.

 

HTML을 JSX로 변환하기

<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. 하나의 루트 엘리먼트로 반환하기

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

예를 들어, <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>
</>

이 빈 태그를 Fragments라고 합니다.

<Fragment>는 <>...</> 구문으로 사용되고,

브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화할 수 있습니다.

▶ Fragment 

 

※ JSX 태그를 하나로 감싸줘야 하는 이유

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.

하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다.

따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

 

 

2. 모든 태그는 닫아주기

JSX에서는 태그를 명시적으로 닫아야 합니다.

<img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야 합니다.

다음과 같이 Hedy Lamarr의 이미지 항목을 닫아줍니다.

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

 

 

3. 카멜 케이스 사용하기

JSX는 JavaScript로 바뀌고 JSX에서 작성된 어트리뷰트는 JavaScript 객체의 키가 됩니다.

컴포넌트에서는 종종 어트리뷰트를 변수로 읽고 싶은 경우가 있습니다.

그러나 JavaScript는 변수명에 제한이 있습니다.

예를 들면, 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없습니다.

이것이 바로 React에서 HTML과 SVG의 어트리뷰트 대부분이 카멜 케이스로 작성되는 이유입니다.

 

예를 들면, stroke-width 대신 strokeWidth로 사용합니다.

class는 예약어이기 때문에,

React에서는 DOM의 프로퍼티 이름을 따서 className으로 대신 작성합니다.

Element.className

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