더북(TheBook)

JSX로 작성한 예제를 Babel 버전 6을 사용해서 자바스크립트로 변환하면 다음과 같다(Babel에 대해서는 이후에 더 설명한다).

"use strict";
 
React.createElement(
  "div",
  null,
  " ",
  React.createElement(HelloWorld, null),
  " ",
  React.createElement("br", null),
  " ",
  React.createElement(
      "a",
      { href: "http://webapplog.com" },
      "Great JS Resources"
  ),
  " "
);

 

JSX는 본질적으로 XML과 문법이 비슷한 간단한 언어다. 그렇지만 JSX는 사람들이 UI 컴포넌트를 작성하는 방법을 바꿔놓았다. 예전에는 개발자들이 HTML을 작성하고 MVC처럼 컨트롤러와 뷰에 해당하는 자바스크립트 코드를 작성하면서 여러 파일들을 열어 놓고 오락가락하곤 했다. 그 시절에는 UI 개발에 대한 관심사 분리가 여러 개의 파일을 작성하는 방식으로 이뤄졌다. 정적인 HTML, 약간의 CSS, 자바스크립트 몇 줄로 만든 반짝이는 글자로 구성된 웹 서비스를 훌륭하게 제공했다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.