더북(TheBook)

2.2 JSX란?

 

JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 나중에 코드가 번들링되면서 babel-loader를 사용하여 자바스크립트로 변환합니다. JSX 코드를 어떤 식으로 변환하는지 한번 볼까요?

JSX

var a = (
  <div>
    <h1>Awesome <b>React</b></h1>
  </div>  
)

 

이 코드를 바벨로 변환하면 다음 형식이 됩니다.

var a = React.createElement(
  “div”,
  null,
  React.createElement(
    “h1”,
    null,
    “Awesome “,
    React.createElement(
      “b”,
      null,
      “React”
    )
  )
);
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.