JSX(JavaScript)

JSX(JavaScript 구문 확장자 및 때때로 JavaScript XML이라고도 함)는 JavaScript 언어 구문에^[1] 대한 React 확장자로, 많은 개발자에게 익숙한 구문을 사용하여 구성요소 렌더링을 구조화하는 방법을 제공한다.HTML과 외관이 비슷하다.

반응 컴포넌트는 일반적으로 JSX를 사용하여 작성되지만, 구성 요소가 순수한 자바스크립트로 작성될 수도 있기 때문에 필요하지 않다.JSX는 XHP라고 불리는 PHP를 위해 메타(구 Facebook)가 만든 또 다른 확장 구문과 비슷하다.

마크업

JSX 코드의 예:

경시하다 앱. = () => {    돌아오다 (      <칸막이하다>        <p>헤더</p>        <p>내용</p>        <p>바닥글</p>      </칸막이하다>    );  } 

내포된 요소

동일한 레벨의 여러 요소를 다음과 같은 단일 반응 요소로 포장해야 한다.<div>위에 표시된 요소, 에 의해 묘사된 단편.<Fragment>또는 그 속기의 형태로.<>또는 배열로 반환됨.^[2][3]

특성

JSX는 HTML에서 제공하는 것들을 미러링하도록 설계된 다양한 요소 속성들을 제공한다. 또한 사용자 지정 속성은 컴포넌트로 전달될 수 있다.^[4]모든 속성은 구성 요소에 의해 소품으로 수신된다.

자바스크립트 식

JavaScript 표현식(문장은 아님)은 JSX 내에서 구불구불한 괄호로 묶어서 사용할 수 있다.{}:

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

위의 예는 다음과 같다.

 <h1>11.

조건문

if-else 문장은 JSX 내에서 사용할 수 없지만 조건부 표현식은 대신 사용할 수 있다.아래 예제는 다음과 같다.{ i === 1 ? 'true' : 'false' }현악대로'true'때문에i1과 같다.

경시하다 앱. = () => {    경시하다 i = 1;     돌아오다 (      <칸막이하다>        <h1>{ i === 1 ? '진짜' : '거짓말' }</h1>      </칸막이하다>    ); } 

위 내용은 다음을 렌더링한다.

<div> <h1> 참[/h1] </div]

기능 및 JSX는 조건부로 사용할 수 있다.

경시하다 앱. = () => {    경시하다 단면도 = [1, 2, 3];     돌아오다 (      <칸막이하다>        {단면도.지도를 그리다((n,i) => (            /* '키'는 목록 항목과 변경 사항을 추적하기 위해 리액션에 의해 사용된다. */            /* 각 '키'는 고유해야 함 */            <칸막이하다 핵심을={"섹션-" + n}>                단면 {n} {i === 0 && <스판하다>(맨 처음의)</스판하다>}            </칸막이하다>        ))}      </칸막이하다>    ); } 

위 내용은 다음을 렌더링한다.

섹션 1[div] 섹션 2[/div] 섹션 3[/div] 섹션 1[div]

JSX로 작성된 코드는 웹 브라우저로 이해하기 전에 Babel과 같은 툴로 변환해야 한다.^[5]이 처리는 일반적으로 애플리케이션이 배치되기 전에 소프트웨어 빌드 프로세스 중에 수행된다.

참고 항목

• XML용 ECMAScript

외부 링크

• 초안: JSX 사양

참조