JSX (자바스크립트)

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

 마크업 
JSX 코드의 예시:
const App = () => {
   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   );
}

 중첩 요소 
같은 수준의 여러 요소는 위에서 보여준 <div> 요소, <Fragment> 또는 그 축약형 <>로 구분된 프래그먼트와 같이 단일 React 요소로 묶이거나 배열로 반환되어야 한다.

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

 자바스크립트 표현식 
자바스크립트 표현식 (하지만 문은 아님)은 중괄호 {}를 사용하여 JSX 내에서 사용할 수 있다.
  <h1>{10+1}</h1>

위 예시는 다음을 렌더링한다:
  <h1>11</h1>

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

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}
위는 다음을 렌더링한다:
<div>
  <h1>true</h1>
</div>

함수와 JSX는 조건문에서 사용될 수 있다:
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로 작성된 코드는 웹 브라우저가 이해하기 전에 바벨과 같은 도구로 변환해야 한다. 이 처리는 일반적으로 애플리케이션이 배포되기 전에 소프트웨어 빌드 과정에서 수행된다.

 같이 보기 
 ECMAScript for XML

 각주 

 외부 링크 
 , Draft: JSX specification

분류:자바스크립트
분류:XML 마크업 언어
분류:2014년 소프트웨어
분류:페이스북 소프트웨어