리액트 공식 문서 번역-03. JSX로 마크업 작성하기

JSX는 자바스크립트에서 HTML과 비슷한 마크업을 작성할 수 있게 해주는 문법 확장입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자들은 JSX의 간결함을 선호하며 대부분의 코드베이스에서 사용합니다.

 

JSX: JavaScript에 마크업을 넣기

웹은 HTML, CSS 및 JavaScript로 구축되었습니다. 오랫동안 웹 개발자들은 콘텐츠를 HTML에, 디자인을 CSS에, 그리고 로직을 JavaScript에 두었습니다 - 종종 서로 다른 파일에! 콘텐츠는 HTML 내부에서 마크업되었으며 페이지의 로직은 JavaScript에서 따로 처리되었습니다

 

하지만 웹이 더욱 interactive 해짐에 따라, 로직이 콘텐츠를 결정하는 경우가 많아졌습니다. JavaScript가 HTML을 지배하게 되었습니다. 그래서 React에서는 렌더링 로직과 마크업이 함께 위치하는 곳인 컴포넌트에 있다는 것입니다.

 

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

 

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

💡 JSX와 React는 서로 다른 것입니다. 그러나 종종 함께 사용됩니다. JSX는 구문 확장 기능이고, React는 자바스크립트 라이브러리입니다. 따라서 두 가지 기술은 독립적으로 사용할 수 있습니다.

 

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

 

https://codesandbox.io/s/pxltgm?file=/App.js&utm_medium=sandpack.

cool-night-pxltgm - CodeSandbox

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

 

이 빈 태그를 프래그먼트(Fragment)라고합니다. 프래그먼트를 사용하면 브라우저 HTML 트리에 아무런 흔적도 남기지 않고 항목을 그룹화 할 수 있습니다.

 

왜 여러개의 JSX 태그들은 감싸져야 하는 걸까요?

JSX는 HTML처럼 보이지만 내부에서는 일반적인 JavaScript 객체로 변환됩니다. 두 개의 객체를 배열로 묶지 않고 함수에서 반환할 수 없습니다. 따라서, 두 개의 JSX 태그도 다른 태그나 Fragment로 묶어주지 않으면 반환할 수 없습니다.

 

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는 JavaScript로 변환되고, JSX에서 작성된 속성은 JavaScript 객체의 키가 됩니다. 사용자 정의 컴포넌트에서는 종종 이러한 속성을 변수로 읽을 필요가 있습니다. 그러나 JavaScript에는 변수 이름에 제한 사항이 있습니다. 예를 들어 이름에 대시(-)를 포함하거나 class와 같은 예약어일 수 없습니다.

 

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

 

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

 

DOM 구성 요소 속성의 목록에서 이러한 속성을 모두 찾을 수 있습니다. 만약 하나를 잘못 사용하면 걱정하지 마세요. React는 브라우저 콘솔에 가능한 교정과 함께 메시지를 출력합니다.

💡 역사적인 이유로, aria-* 및 data-* 속성은 HTML에서 대시로 작성됩니다.

 

전문 팁: JSX 변환기 사용하기

기존 마크업의 모든 이러한 속성을 변환하는 것은 귀찮은 일일 수 있습니다! 우리는 기존의 HTML 및 SVG를 JSX로 변환하는 데 사용할 수 있는 변환기를 추천합니다. 변환기는 실제로 매우 유용하지만, 직접 JSX를 편안하게 작성할 수 있도록 이해하는 것도 여전히 중요합니다.

 

여기 최종 결과입니다

https://codesandbox.io/s/4bnq6o?file=/App.js&utm_medium=sandpack.

suspicious-nightingale-4bnq6o - CodeSandbox

 

요약

JSX가 왜 존재하는지 그리고 컴포넌트에서 JSX를 사용하는 방법에 대해 알게 되었습니다

• React 컴포넌트는 관련된 렌더링 로직과 마크업을 함께 그룹화합니다.
• JSX는 HTML과 유사하지만 몇 가지 차이점이 있습니다. 필요한 경우 변환기를 사용할 수 있습니다.
• 오류 메시지는 종종 마크업을 수정하는 방향으로 가이드를 제공합니다.

 

2023.07.09 - [React/Documentation] - 리액트 공식 문서 번역-04. 중괄호로 JSX 내에서 JavaScript 사용하기

리액트 공식 문서 번역-04. 중괄호로 JSX 내에서 JavaScript 사용하기