JSX (자바스크립트)

JSX(자바스크립트 XML, JavaScript XML)는 자바스크립트 언어 문법의 XML과 유사한 확장이다.^[1] 원래 페이스북이 React와 함께 사용하기 위해 만들었으나, JSX는 여러 웹 프레임워크에 채택되었다.^[2]:5[3]:11 신택틱 슈거로서, JSX는 일반적으로 원본 JSX와 구조적으로 유사한 중첩된 자바스크립트 함수 호출로 트랜스파일된다.

JSX 코드의 예시:

const App = () => {
   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   );
}

같은 수준의 여러 요소는 위에서 보여준 <div> 요소, <Fragment> 또는 그 축약형 <>로 구분된 프래그먼트와 같이 단일 React 요소로 묶이거나 배열로 반환되어야 한다.^{[4][5][3]:68-69}

JSX는 HTML이 제공하는 것과 유사하게 설계된 다양한 요소 속성을 제공한다. 사용자 정의 속성도 컴포넌트에 전달할 수 있다.^[6] 모든 속성은 컴포넌트에서 props로 수신된다.

자바스크립트 표현식 (하지만 문은 아님)은 중괄호 {}를 사용하여 JSX 내에서 사용할 수 있다.^[3]:14-16

  <h1>{10+1}</h1>

위 예시는 다음을 렌더링한다:

  <h1>11</h1>

If–else 문은 JSX 내에서 사용할 수 없지만 조건식은 대신 사용할 수 있다. 아래 예시는 i가 1과 같기 때문에 { i === 1 ? 'true' : 'false' }를 문자열 'true'로 렌더링한다.

const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

위는 다음을 렌더링한다:

<div>
  <h1>true</h1>
</div>

함수와 JSX는 조건문에서 사용될 수 있다:^[3]:88-90

const App = () => {
   const sections = [1, 2, 3];

   return (
     <div>
       {sections.map((n,i) => (
           /* 'key' is used by React to keep track of list items and their changes */
           /* Each 'key' must be unique */
           <div key={"section-" + n}>
               Section {n} {i === 0 && <span>(first)</span>}
           </div>
       ))}
     </div>
   );
}

위는 다음을 렌더링한다:

<div>
  <div>Section 1<span>(first)</span></div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

JSX로 작성된 코드는 웹 브라우저가 이해하기 전에 바벨과 같은 도구로 변환해야 한다.^[7][8]:5 이 처리는 일반적으로 애플리케이션이 배포되기 전에 소프트웨어 빌드 과정에서 수행된다.

• ECMAScript for XML

• JSX - 공식 웹사이트, Draft: JSX specification