React.js 관련 이모저모

프로젝트를 진행하면서 생각지도 않게 react.js를 도입하게 되었다. 아시다시피 이건 페이스북에서 만든 것이며 홈페이지는 https://facebook.github.io/react/index.html 되겠다. 예전엔 한국어 버전 홈페이지가 있었는데 지금 못찾겠다.

명시했듯이 MVC에서 V에 집중한다고 한다. 적용해보니 굉장히 빠르다. 하지만 생각지도 않은 문제도 꽤나 나왔다. 

Mounting : 컴포넌트가 DOM에 삽입되는 중
Updating : 컴포넌트가 DOM의 업데이트 여부를 결정하기 위해 다시 렌더링
Unmounting : 컴포넌트가 언마운트 되어 파괴되기 직전에 호출

사수가 정리해준 기본 개념인데 솔직히 어렵다.

Mounting 밑에는 getInitialProps, getInitialState, componentWillMount, componentDidMount 정도가 있고 componentWillMount, componentDidMount 사이에 page render가 있다. 

Updating 밑에는 componentWillreceiveProps, e.setState, shouldComponentUpdate, componentWillUpdate, componentDidUpdate 정도가 있다. 나머지 Unmounting에도 몇가지가 있는데 내가 개념을 몰라서 쓸 수가 없다.

getInitialProps : 난 조건값 정도라고 이해하고 있다. 이 프로퍼티들이 바뀌면 getInitialState로 넘어간다고 이해하고 있다. 

getInitialState : 초기 설정값 정도로 이해하고 있는데 이게 바뀌면 무조건 화면을 render 한다.

componentWillMount : 여기는 페이지가 로딩되기 전에 원하는 내용들을 세팅한다고 들었는데 아직 쓰고 있지를 않다. (다 실력부족이라서...)

componentDidMount : 여기는 우리가 흔히 아는 document.ready에 해당하는 위치다. 여기에 이런저런 기능들을 작성하면 된다.

react.js의 작성구조는 

var MySetting = React.createClass({
    getInitialState : function() {
        // 여기에 이런 저런 내용
    },
    componentDidMount : function() {
        // blah blah
    },
    render : function() {
        return (
            // 여기에 그려질 템플릿을 작성
        )
    }
});

뭐 이렇게 되는 것 같다. 지금 장님 코끼리 만지듯 만드는 거라 이게 완성되고 나서야 이런 저런 내용을 정리할 수 있지 않을까 싶다.