facebook react (1)

react

필자가 프론트엔드 개발자는 아니지만 관심깊게 봐온 react에 대해 알아보겠다. 앵귤러와 비교 대상은 아니지만 리액트가 더 맘에 든다. 앵귤러는 공부를 안해봐서 그런지도. 처음에 선택한 이유는 일단 페이스북이 직접 사용하고 있기 때문에 조금 안심(?) 이다. 크롬에서 페이스북으로 들어간 다음에 개발자 도구에서 다음과 같이 입력해보자

require("React").version
#"15.0.0-rc.1"

아무튼 리액트를 다운받자 react download 다운로드 받으면 된다. 그럼 프로젝트를 한개 만들자. 아무 빈 프로젝트면 된다. 필자는 인텔리j로 했다.

<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

다운받은 리액트를 원하는 경로에 넣고 위와 같이 선언하자 원래 예전에 봤을때는 jsx컴파일러를 썼는데 지금 홈페이지가보니까 babel을 사용하라 한다. 그래서 바벨을 사용하겠다 또한 es6문법을 사용하겠다(아직 초보) 그럼 다음에 body안에 아래와 같이 입력하자

<div id="app"></div>
<script type="text/babel">
    class AppMain extends React.Component {
        render() {
            return (
                    <h2>hello world!!</h2>
            );
        }
    }
    ReactDOM.render(<AppMain/>, document.getElementById(app));
</script>

그리고 파일을 열어보자 그럼 hello world!!가 보일 것이다. 일단 한개씩보자. 리액트는 컴포넌트를 통해 뷰만 담당한다. 그래서 위에 말했듯이 앵귤러랑은 비교 대상이 아니다. 여기서 컴포넌트란 재사용을 가능하게 하고 컴포넌트끼리의 결합등을 이야기 한다. 또한 리액트는 VIRTUAL DOM을 갖고 있다. 구조의 전후 상태를 비교하여 변경에 필요한 부분만 반영한다. 그래서 처음에는 조금 느려도 시간이 지날수록 빠르다. 저기 render 함수를 보면 html코드가 그대로 있다. 저문법은 jsx문법으로 xml과 같은 문법이기 때문에 몇몇개의 속성이 다르다. 예를들어 class는 쓸수 없다. class는 className으로 바꿔서 써야된다. 아래와 같이 해보자

class AppMain extends React.Component {
    render() {
        return (
                <h2>hello {this.props.name}</h2>
        );
    }
}
ReactDOM.render(<AppMain name="wonwoo"/>, document.getElementById(app));

props라는 키워드가 보인다. props란 부모 컴포넌트에서 전달 받은 객체다. readOnly라 정하기 했지만 사실상 변경 가능은하다. 다음을 보자. 이번엔 state다. 이아이는 현재 컴포넌트의 상태 값을 저장하고 있는 아이다. 변경이 가능하며 실제 외부에선 접근하지 않는다.(private) 만약 state가 변경이 되면 render를 다시 호출한다. 일단 소스를 보자.

class AppMain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
        };
    }
    increase(i){
        this.setState({index: this.state.index += i});
    }
    render() {
        return(
                <div>
                    <button onClick={this.increase.bind(this,1)}>increase</button>
                    <h2>hello {this.state.index}</h2>
                </div>
        );
    }
}
ReactDOM.render(<AppMain/>, document.getElementById(app));

일단 생성자에 state를 초기화 할수 있다.(getInitialState 와 라이프사이클이 비슷한걸로 보인다. 라이프사이클은 밑에 알아보겠다.) 버튼을 클릭했을때 setState을 호출하여 index를 증가 시켰다. 어느정도 감이 왔을 것으로 보인다. 다음은 라이프사이클을 알아보겠다. 일단 자주 쓰는거에 대해서만 알아보겠다. 나머지는 문서 참조!

class AppMain extends React.Component {
    constructor(props) {
        super(props);
        console.log("1");
    }

    render() {
        console.log("2")
        return(
            <div>
                <button onClick={this.unmount.bind(this)}>unmount</button>
            </div>
        );
    }

    componentWillMount(){
        console.log("3")
    }

    componentDidMount(){
        console.log("4")
    }

    componentWillUnmount(){
        console.log("5");
    }
    unmount(){
        React.unmountComponentAtNode(document.getElementById(app))
    }

}
ReactDOM.render(<AppMain/>, document.getElementById(app));

어디보자 constructor는 생성자가 있다. 위에 언급했듯이 getInitialState와 비슷한 라이프사이클은 갖는듯 하다. 제일 처음에 호출 된다. 다음은 render가 호출된다. 실제 뷰를 그리는 역할을 하고 있다. componentWillMount 마운트 직전에 한번 호출된다. 업데이트된 state를 확인할 수 있고 state가 변함에도 불구하고 render()가 한번만 실행 된다. 또한 DOM 엘리먼트를 조작 할 수 없다. 다음에 호출 되는 componentDidMount 는 이시점 부턴 DOM을 조작 가능하고 또한 서버와 통신을 여기서 한다. componentWillUnmount 는 언마운트 될때 호출 된다. 리액트를 잠깐 알아봤다. 다음엔 webpack과 바벨을 통해서 컴파일하면서 개발 하는법을 알아보겠다.