JSX 기반 마크업 작성

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

JSX: 자바스크립트에 마크업 넣기

웹은 HTML, CSS 및 자바스크립트로 구성되어 있습니다. 오랜 기간 동안 웹 개발자들은 내용을 HTML, 디자인을 CSS, 로직을 자바스크립트에 유지했습니다. 종종 이들은 별도의 파일에서 관리되었습니다! 내용은 HTML 내에서 마크업되었고 페이지의 로직은 자바스크립트에서 별도로 유지되었습니다.

HTML

자바스크립트

그러나 웹이 더 인터랙티브해짐에 따라 로직이 내용을 결정하는 경우가 더 많아졌습니다. 자바스크립트가 HTML을 담당하게 되었습니다! 이것이 바로 리액트에서 렌더링 로직과 마크업이 함께 있는 곳인 컴포넌트입니다.

Sidebar.js React component

Form.js React component

버튼의 렌더링 로직과 마크업을 함께 유지함으로써, 편집할 때마다 둘 사이의 동기화를 보장할 수 있습니다. 반면, 버튼의 마크업과 사이드바의 마크업과 같이 관련이 없는 세부 정보는 서로 독립적으로 분리되어 변경해도 안전합니다.

각 리액트 컴포넌트는 자바스크립트 함수이며, 리액트는 해당 컴포넌트를 브라우저에 렌더링하는 마크업을 포함할 수 있습니다. 리액트 컴포넌트는 JSX라는 구문 확장을 사용하여 해당 마크업을 표현합니다. JSX는 HTML과 많이 비슷하지만 약간의 규칙이 더 있으며 동적 정보를 표시할 수 있습니다. 이해하는 가장 좋은 방법은 일부 HTML 마크업을 JSX 마크업으로 변환하는 것입니다.

참고
JSX와 리액트는 서로 다른 것입니다. 종종 함께 사용되지만, 서로 독립적으로 사용할 수도 있습니다. JSX는 구문 확장이며, 리액트는 자바스크립트 라이브러리입니다.

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 (
    // ???
  )
}

그대로 복사하여 붙여넣으면 작동하지 않습니다.

이는 JSX가 HTML보다 엄격하고 몇 가지 추가 규칙을 가지기 때문입니다! 위의 오류 메시지를 읽으면 마크업을 수정하는 데 도움이 될 것이거나, 아래 안내를 따를 수 있습니다.

참고 대부분의 경우, 리액트의 화면에 표시되는 오류 메시지가 문제의 위치를 찾는 데 도움이 됩니다. 막힐 경우 메시지를 읽어보세요!

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 Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

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

2. 모든 태그를 닫아야 함

JSX에서는 태그를 명시적으로 닫아야 합니다. <img>와 같은 self-closing 태그는 <img />로 변경되어야 하며, <li>oranges와 같은 wrapping 태그는 <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>
</>

3. 모든 것을 camelCase로 작성

JSX는 자바스크립트로 변환되며, JSX에서 작성한 속성은 자바스크립트 객체의 키가 됩니다. 자체 컴포넌트에서는 이러한 속성을 변수로 읽어올 때가 많습니다. 그러나 자바스크립트에는 변수 이름에 제한이 있습니다. 예를 들어, 변수 이름에는 대시(-)를 포함하거나 class와 같은 예약어를 사용할 수 없습니다.

이것이 리액트에서 HTML 및 SVG 속성의 많은 부분이 camelCase로 작성되는 이유입니다. 예를 들어, stroke-width 대신 strokeWidth를 사용합니다. class는 예약어이므로 리액트에서는 className을 사용하며, 해당 DOM 속성에 맞춰서 작성됩니다.

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

이러한 속성은 DOM 컴포넌트 props 목록에서 찾을 수 있습니다. 하나를 잘못 작성하면 리액트가 브라우저 콘솔에 가능한 수정과 함께 메시지를 출력합니다.

팁: JSX 변환기 사용

기존 마크업의 모든 속성을 변환하는 것은 번거로울 수 있습니다! 기존의 HTML 및 SVG를 JSX로 변환하기 위해 변환기를 사용하는 것을 권장합니다. 변환기는 실제로 매우 유용하지만, 스스로 JSX를 편안하게 작성할 수 있도록 변환하는 과정을 이해하는 것도 가치가 있습니다.

최종 결과는 다음과 같습니다.

요약

이제 JSX가 왜 존재하는지 알고, 컴포넌트에서 어떻게 사용하는지 알게 되었습니다.

• 리액트 컴포넌트는 관련이 있는 렌더링 로직과 마크업을 함께 그룹화합니다.
• JSX는 HTML과 유사하지만 몇 가지 차이점이 있습니다. 변환기를 사용할 수 있습니다.
• 오류 메시지는 주로 마크업 수정 방향을 가리키는 데 도움이 됩니다.