HTML 페이지에서 react.jsreact-dom.js 사용하기

react.js 파일은 React 요소를 생성하고 react 컴포넌트를 적을 때 필요한 가장 중요한 파일입니다. HTML 문서(예: DOM) 안에 당신의 컴포넌트를 렌더할 계획이 있다면, react-dom.js 파일도 필요할 것입니다. react-dom.js 파일은 react.js 파일에 의존적이며, react.js 파일을 먼저 포함시킨 다음에 react-dom.js 파일을 포함시켜야 합니다.

알맞게 React를 포함시킨 HTML 문서의 예시는 아래와 같습니다.

<!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>
</body>
</html>

react.js 파일과 react-dom.js 파일이 HTML 페이지에 로드되면, 그제서야 React 노드/컴포넌트를 생성할 수 있고 그것들을 DOM으로 렌더할 수 있습니다. 아래의 HTML에서는 React <div> 노드를 포함한 React 컴포넌트인 HelloMessage가 생성됩니다. 이 React <div> 노드는 DOM에서 HTML 요소인 <div id="app"></div> 내부에 렌더됩니다.

<!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>

이 셋업을 위해 필요한 건 React가 전부입니다. 한편 이번 셋업에서는 JSX를 사용하지 않고 있습니다. 다음 섹션에서 JSX 사용법에 대해 논의할 예정입니다.

메모

  • react-with-addons.js라 불리는 react.js 대체 파일은 React 어플리케이션을 빌드하기 위한 유용한 모듈 모음에서 찾을 수 있습니다. "addons" 파일은 react.js 파일의 위치에서 사용할 수 있습니다.
  • 당신의 React 앱에서 루트 노드를 <body> 요소로 만들지 마세요. <body> 안에는 항상 루트 <div>를 넣고, ID를 부여하고, 이것을 렌더하도록 하세요. 이렇게 하면 React에게 <body> 요소의 자식들 중 누군가 또 변하고 싶은 다른 게 없는지 걱정할 필요 없이 딱 React가 신경써야 하는 범위를 정해줍니다.

results matching ""

    No results matching ""