JSX is React Element

JSX는 React 요소와 동일

JSX 란?

JSX(JavaScript Syntax eXtension)는 XML과 유사한 구문 확장으로 ECMAScript 표준과 관련이 없습니다. JSX는 React 앱 제작 과정에서 반드시 필요한 것은 아니지만, JavaScript 추상 객체 만으로 UI View를 구성하는 마크업을 구현하는 것은 매우 복잡하고 불편하므로 특별한 상황이 아닌 경우 JSX를 사용하는 것이 권장됩니다. 🤨

JSX는 Babel JavaScript 컴파일러에 의해 React 요소(Element)로 컴파일 됩니다.

JSX → React 요소

<button type="button" className="button button__resolve">승인</button>

// ⬇ Babel 컴파일러에 의해 React 요소로 컴파일 됨

React.createElement(
  'button', 
  {
    type: 'button',
    className: 'button button__resolve'
  },
  '승인'
)

React 요소는 실제 DOM 요소가 아니라, DOM 요소를 추상화 한 JavaScript 객체입니다.

{
  type: 'button',
  props: {
    type: 'button',
    className: 'button button__resolve',
    chlidren: ['승인']
  }
}

JSX는 필수?

JSX를 사용하지 않아도 React 앱을 구성하는 데 아무런 문제가 되지 않습니다. 다음과 같이 React 요소를 생성하고 조립하면 되기 때문입니다. 앞선 예제보다 다소 복잡한 DOM 구조를 React 요소로 생성한 코드입니다.

React API

const containerElement = React.createElement(
  'div', 
  { 
    className: 'container' 
  }, 
  React.createElement(
    'h1', 
    {
      lang: 'en'
    }, 
    React.createElement(
      'abbr',
      {
        title: 'JavaScript eXtension'
      },
      'JSX'
    )
  )
)

물론 JSX를 사용하면 코드가 직관적이고, HTML 문법과 비슷해 읽기 쉽고 수정하기도 편합니다. 🙂

JSX

const containerElement = (
  <div className="container">
    <h1 lang="en">
      <abbr title="JavaScript eXtension">JSX</abbr>
    </h1>
  </div>
)

Babel REPL

Babel REPL 서비스는 JSX 코드가 React API 코드로 어떻게 변경되는 지 실시간으로 보여줍니다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 React API 코드로 변경되어 출력됩니다. (왼쪽 사이드 바 react 체크)