Note Babel 버전 6 외의 다른 도구를 사용할 수 있을까?

JSX 변환 도구가 여러 가지 있기는 하지만, 가장 흔히 사용하는 도구이자 React 팀이 2016년 8월 현재 공식 웹사이트에서 추천하는 도구는 Babel이다. Babel의 예전 이름은 5to6였다. 예전에는 React 팀이 react-tools와 브라우저 상에서 JSX 변환을 실행하는 JSXTransformer를 유지보수했지만, 버전 0.13부터 Babel의 사용을 권장하고 react-tools와 JSXTransformer 개선 작업을 중단했다.⁷

브라우저 내에서 런타임 변환이 필요한 경우에는 Babel 버전 5에서 제공하는 browser.js의 즉시 사용 가능한 배포판을 사용할 수 있다. JSXTransformer와 마찬가지로 브라우저에 추가하면 <script> 코드를 자바스크립트로 변환할 수 있다. 이를 위해서는 type=”text/babel” 속성을 추가해야 한다. browser.js를 포함하고 있는 마지막 Babel 버전은 5.8.34이며, CDN을 통해 바로 불러올 수 있다(https://cdnjs.com/libraries/babel-core/5.8.34).

Babel 버전 6은 기본 설정값을 두지 않도록 변경되었으며, browser.js도 제거했다. Babel 팀은 개발자들이 각자의 배포판을 생성하거나 Babel API를 사용하는 것을 권장한다. babel-standalone 라이브러리도 있지만(https://github.com/Daniel15/babel-standalone), 설정을 거쳐야 한다.

Traceur(https://github.com/google/traceur-compiler)도 Babel 대신 사용할 수 있는 도구다.

끝으로 TypeScript(www.typescriptlang.org)도 jsx-typescript(https://github.com/fdecampredon/jsx-typescript)를 이용하면 JSX 변환을 지원하는 것 같다.⁸ 그렇지만 TypeScript는 완전히 새로운 도구이자 일반적인 자바스크립트의 확장이라고 할 수 있는 새로운 언어다.

아마도 이 책의 예제를 JSXTransformer, Babel 버전 5, babel-standalone, TypeScript, Traceur를 사용하는 것도 가능할 것이다. 이 책은 React 버전 15를 기준으로 작성되었다. TypeScript나 Traceur를 사용하는 것이 비교적 안전한 방법인데, 이 책을 집필하는 시점에서 지원이 잘 되고 있는 도구이기 때문이다. 그러나 이 책의 예제에 Babel 버전 6 외의 도구를 사용하는 것은 스스로 위험을 감수해야 한다. 이 책의 기술 검토를 맡은 분들과 나는 여기서 소개한 Babel 버전 6 이외의 도구로는 예제 코드를 컴파일해보지 않았다.