Babel을 통해 JSX 사용하기

아래의 HTML 페이지에 React의 HelloMessage 컴포넌트와 React의 <div> 요소 노드는 React.createClass()React.createElement() 함수를 이용해서 생성했습니다. 이 코드는 지난 섹션에서 본 HTML과 동일하기 때문에 익숙해 보여야 합니다. 이 HTML은 ES5 browsers에서 에러 없이 동작할 것입니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://fb.me/react-15.2.0.js"></script>
        <script src="https://fb.me/react-dom-15.2.0.js"></script>
    </head>
<body>
    <div id="app"></div>
    <script>
        var HelloMessage = React.createClass({
            displayName: 'HelloMessage',
            render: function render() {
                return React.createElement('div',null,'Hello ',this.props.name);
            }
        });
        ReactDOM.render(React.createElement(HelloMessage,{ name: 'John' }), document.getElementById('app'));
    </script>
</body>
</html>

적용하는 건 당신의 선택에 달려있겠지만, Babel을 통해 JSX를 사용하면 React.createElement() JavaScript 함수 호출을 추상화시켜 React 요소 생성하는 것을 더 단순화할 수 있습니다. 더 자연스러운 HTML 같은 스타일과 문법으로 적을 수 있게 되기 때문이죠.

아래처럼 React.createElement()를 사용하는 것 대신:

return React.createElement('div',null,'Hello ',this.props.name);

JSX를 사용하면 이렇게 적을 수 있습니다:

return <div>Hello {this.props.name}</div>;

그리고 Babel은 다시 위의 코드를 React.createElement()를 사용하는 코드로 변환해서 JavaScript 엔진이 분석할 수 있게끔 만들어줍니다.

막연하게 표현한다면, JavaScript에 JSX를 직접 적을 수 있고 브라우저가 실행할 수 있는 ECMAScript 5 코드로 Babel이 변환해줘야 하는 HTML의 한 형태라고 생각해도 됩니다.

JSX에 관해 더 자세한 내용은 JSX 챕터에서 다뤄질 것입니다. 지금은 JSX가 당신이 React 요소를 만들 때 편의를 위해 제공되는 선택적인 추상화라는 점, 그리고 Babel이 변환해주기 전까지는 ES5 브라우저가 실행할 수 없다는 점만 이해하시면 됩니다.

브라우저 안에서 Babel을 통해 JSX 변환하기

보통 Babel은 Babel CLI 도구(예: webpack 같은 무언가)를 이용해 개발 도중에 당신의 JavaScript 파일을 자동으로 처리하도록 셋업됩니다. 하지만 브라우저 안에서 스크립트를 포함하는 방식으로 Babel을 직접 사용하도록 만드는 것도 가능합니다. 우리는 이제 막 시작했기 때문에, 모듈 로더를 배운다거나 CLI 도구는 하지 않고 React를 배우는 데에 집중하겠습니다. 참고로 프로덕션 환경에서는 이 브라우저 변환을 절대 사용하지 않도록 주의하세요.

Babel 프로젝트는 안타깝게도, 현재 Babel 6를 기준으로 브라우저 안에서 JSX 코드를 ES5 코드로 변환할 때 필요한 스크립트 파일(예: browser.js)을 더 이상 제공하지 않습니다. 그러므로 JSX/ES*를 브라우저 안에서 변환하기 위해서는 필요한 파일(예: browser.js)을 제공해주는 Babel의 오래된 버전(예: 5.8.23)을 사용해야 할 것입니다.

브라우저 안에서 JSX를 변환하기 위해 browser.js (Babel 5.8.23) 이용하기

아래의 HTML 파일을 보면, 우리가 여태까지 작업했던 HelloMessage 컴포넌트를 생성하는 React 코드가 JSX를 사용하도록 업데이트되었습니다. 이 코드의 변환이 가능했던 이유는 우리가 browser.js라는 Babel 파일을 포함시키고 <script> 요소에게 type="text/babel"라는 type 속성을 주었기 때문입니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://fb.me/react-15.2.0.js"></script>
        <script src="https://fb.me/react-dom-15.2.0.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render: function() {
                return <div>Hello {this.props.name}</div>;
            }
        });

        ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));
    </script>
</body>
</html>

브라우저에서 JSX를 변환하는 것은 셋업하기 편리하고 쉽지만, 런타임마다 변환이 이뤄지기 때문에 가장 이상적인 방법은 아닙니다. 이런 부분이 웹페이지를 느리게 만들거나 메모리 이슈를 발생시킬 수도 있습니다. 따라서 browser.js를 사용하는 건 프로덕션 환경을 위한 솔루션은 아닙니다.

JSFiddle을 이용해 이 책에서 사용되고 있는 코드 예시들은 JSX를 ES5 코드로 변환하기 위해서 browser.js (Babel 5.8.23)를 사용하고 있다는 점을 기억하시기 바랍니다. 다시 말해서, JSFiddle은 React 코드를 실행할 때 위에 보이는 HTML 파일의 거의 대부분을 처리합니다.

메모

  • Babel 도구는 React팀이 ES* 코드와 JSX 문법을 ES5 코드로 변환하기 위해 주관적으로 선택한 도구입니다. Babel handbook를 통해 Babel에 대해 더 많이 배워보세요.
  • JSX를 사용하면:
    • 기술력이 조금 부족한 사람들일지라도 요구 사항을 이해하고 고칠 수 있습니다. CSS 개발자와 디자이너들은 독립적인 JavaScript보다는 JSX가 훨씬 친근하게 느껴질 것입니다.
    • HTML 안에서 JavaScript의 장점을 최대한으로 끌어낼 수 있고 템플릿 언어를 배우거나 사용하지 않아도 됩니다. 그렇지만 JSX는 템플릿 솔루션은 아닙니다. JSX는 UI 컴포넌트들의 트리 구조를 표현하기 위해 사용되는 선언형 문법입니다.
    • 다른 경우라면 놓쳤을 수도 있는 HTML 속 에러를 컴파일러가 잡아줄 것입니다.
    • JSX는 인라인 스타일을 장려합니다. 이것도 좋은 점일 수 있겠죠.
  • JSX를 조심하자는 깨달음도 있습니다.
  • 현재 만들어지고 있는 JSX 사양입니다. 어떠한 시맨틱을 정의하지 않고도 ECMAScript의 XML 같은 문법 확장자처럼 누구나 사용할 수 있습니다.

results matching ""

    No results matching ""