Integrate Meteor and React - 1

본 포스트는 Meteor 공식 홈페이지에 올라와 있는 TODO APP WITH REACT - Integrate Meteor and React을 순서대로 따라가는 도중에 궁금한 것들을 그때 그때 정리한 글입니다. Meteor와 React 초심자 입장에서 써내려 간 두서 없는 정리글입니다. meteor add react로 추가한 React 관련 패키지들이 아직 최신 버전으로 적용되지는 않는 것 같습니다.

React.render

React.render()는 최상위 컴포넌트의 인스턴스를 만들고, 두 번째 는인자로 전달받은 DOM 엘리먼트에 첫 번째 인자로 전달받는 컴포넌트를 삽입하여 프레임워크를 시작한다.

if (Meteor.isClient) {
    Meteor.startup(function () {
        React.render(<App />, document.getElementById("render-target"));
    });
}

React.createClass

React에서는 새로운 React 컴포넌트를 만들기 위해 React.createClass()을 사용한다. view 컴포넌트들은 React.createClass()로 선언된 클래스다. React의 컴포넌트들은 render()를 제외하고는 어떠한 메소드도 가질 수 있다. render()는 React 컴포넌트 트리를 리턴해서 최종적으로 실제 HTML을 그린다.

App = React.createClass({
    ....
    ....

    render() {
        return (
            <div></div>
            ...
        );
    } 
});

render() 내에서 사용되는 <div>, <header> 등의 태그들은 실제 DOM 노드가 아니라 React의 div, header 컴포넌트의 인스턴스이다. 이것들은 React가 다룰 수 있는 데이터의 marker 정도로 생각하면 된다. JSX 컴파일러가 자동으로 HTML 태그들을 React.createElement(tagName) 표현식으로 변경하고 나머지는 그대로 둔다.
React의 컴포넌트는 composable한 성질을 갖는데, 이는 render()가 일반적인 HTML 뿐만 아니라 컴포넌트의 트리도 리턴하기 때문이다.

Read More