JSX

자바스크립트 XML 구문

JSX 소개

"React.js" 프레임워크로 웹 앱을 구현한 적이 있다면 React.js 구성 요소를 작성하기 위한 구문이 다른 Javascript 코드와 약간 다르게 보인다는 것을 눈치채셨을 것입니다. 대부분 동일하지만 React 구성 요소는 특수 괄호, 왼쪽 및 오른쪽 꺾쇠 괄호를 통해 설명됩니다. "Extensible Markup Language"인 XML의 구문처럼 보입니다. React.js에서 이 구문은 유사하게 "Javascript XML"을 의미하는 "JSX"라고 합니다.

이 구문의 주요 목표는 React 코드 작성을 단순화하는 것입니다. JSX 코드는 JVM에서 해석할 수 없으므로 사용하기 전에 실제 Javascript 코드로 컴파일해야 합니다. 일반적으로 Babel 또는 Webpack과 같은 번들러에서 수행하는 작업입니다.

한 번도 작성한 적이 없는 React 코드

이것은 사실상 JSX 코드에서 생성되는 "진정한" React.js 구성 요소를 작성한 적이 없을 가능성이 매우 높다는 것을 의미합니다. 하지만 걱정하지 마세요. 큰 어려움 없이 쉽게 할 수 있습니다. 사실, JSX를 사용하지 않고도 완전한 React 웹 애플리케이션을 작성할 수도 있습니다. 다음 코드 스니펫은 Javascript만 있는 진정한 React.js 구성 요소가 어떻게 생겼는지 보여줍니다.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

소프트웨어를 설치하지 않고도 브라우저에서 이것을 시도할 수도 있습니다! 부록의 링크를 사용하려면 이 페이지 끝까지 아래로 스크롤하십시오.

JSX를 사용하여 코드 단순화

보시다시피 JSX 구문의 주요 이점은 XML과 유사한 구문이 코드 도메인의 명확한 표시를 제공하기 때문에 UI 관련 코드를 작성하기 쉽고 애플리케이션의 다른 부분과 구별하기 쉽게 만드는 것입니다.

JSX의 또 다른 큰 특징은 컴파일 단계 후에 바로 표현식이 된다는 것입니다. 따라서 if-else-statements에서 사용하거나 결과를 변수에 저장할 수도 있습니다. 그리고 React.js 컴포넌트는 표현식을 자식으로 포함할 수 있기 때문에 고도로 구성 가능한 UI 코드를 작성할 수 있습니다!

모든 JSX 파일에 대한 기본 가져오기

이 가져온 변수를 직접 호출할 수는 없지만 다양한 자습서, 가이드 및 자체 코드에 있는 모든 JSX 파일에 React 라이브러리의 기본 가져오기가 포함되어 있음을 알 수 있습니다. 그 이유는 컴파일 단계 후에 모든 JSX 표현식이 이전 코드 예제에서 본 것처럼 "React.createElement" 호출이 되기 때문입니다. 따라서 모든 파일의 범위에 포함된 기본 가져오기의 "React" 변수가 있어야 합니다.

HTML처럼 보이지만 그렇지 않습니다.

JSX 구문으로 코딩할 때 한 가지 주요 제약 조건은 구성 요소 이름의 표기법입니다. 번들러가 구성 요소를 올바르게 식별하려면 구문이 동일해 보이기 때문에 표준 HTML 태그와 고유해야 합니다.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

따라서 JSX 요소를 항상 문장 대소문자로 코딩해야 하는 요구 사항입니다. 즉, 첫 글자는 대문자여야 합니다.

Typescript 변형

많은 프로젝트에서 React.js 구성 요소 파일의 파일 접미사로도 TSX를 사용한다는 사실을 눈치채셨을 것입니다. 이것은 Typescript와 호환되는 원래 JSX의 확장일 뿐입니다. TSX 파일을 사용하면 JSX 표기법 구성 요소와 함께 Typescript 코드를 작성할 수 있습니다.

그냥 시작

이 기사는 React 컴포넌트 코딩을 위한 JSX에 대한 간단한 소개를 제공했습니다. 주요 장점은 웹 환경에서 자연스럽게 느껴지는 매우 간결한 구문입니다. 매우 적은 코드로 고도로 구성 가능한 요소를 작성할 수 있습니다. 이는 의심할 여지 없이 React의 현재 유명하고 인기 있는 상태의 핵심 요소 중 하나입니다. 사이트에 React 팀이 제공하는 훨씬 더 훌륭하고 자세한 가이드가 궁금하다면 이 페이지 끝에 있는 부록에 링크가 있습니다.

제안

관련된

부록

언어