facebook react (2)

react

이번 시간엔 webpack과 바벨컴파일러를 써서 개발을해보자! 일단 npm(node.js)이 있어야된다. nodejs 사이트가서 다운로드 받자. 설치후 터미널을 열어서 해당 프로젝트에서 다음과 같이 인스톨을 하자

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react react react-dom --save-dev

바벨과 리액트를 설치 했다. 그럼 node_moduls라는 파일이 생겼을 것이다. 파일이 많다.. 그럼 다음으로 webpack을 설치 하자

npm install webpack -g

다음은 루트 폴더에 webpack.config.js 파일을 추가 하자

module.exports = {
    entry: ./app.js,
    output: {
        filename: bundle.js,
        path: ./build
    },
    module: {
        loaders: [
            {
                test: /\\.(js|jsx)?$/,
                exclude: /node_modules/,
                loaders: [ babel ]
            },
        ]
    }
};

실제 컴파일된 파일은 bundle.js에 담겨 있다. 바벨 로더를 갖고 컴파일을 할거다. 컴파일러는 바벨 말고 딴것도 있던거 같은데.. 필자가 할 수 있는건 바벨 밖에 없어서... 다음은 .babelrc파일을 루트에 다음과 같이 넣어야된다.

{
   "presets": ["es2015", "react"]
}

그리고 루트 폴더에 app.js를 만들자.

import React, { Component } from react;
import ReactDOM from react-dom;

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

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

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

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

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

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

저번 시간에 만들었던 코드를 갖다 놨다. 나머지코드는 동일하지만 맨 위에 import하는 부분이 있다. 모듈을 import하는 것으로 require("react") 와 동일 하다고 생각하면 된다. 마지막으로 html 파일을 생성하자 기존에 있다면 수정하자. 나머지는 필요 없고

<div id="app"></div>
<script src="../build/bundle.js"></script>

위와 같이 컴파일된 js와 실제 그릴 태그만 있으면 된다. 다 완료 되었다. 이제 webpack으로 컴파일을하자. 그냥 webpack만 터미널에 치면 된다.

webpack

에러가 나면 에러 표시가 나올 것이다. 에러가 나오지 않았다면 브라우저를 열어 확인해보자. 이상없이 잘 된다면 다음으로 넘어가자. 이번엔 import export에 대해 알아보자. 내가 만든 클래스(컴포넌트)를 모듈화 시킬 수 있다. 하는 방법은 간단하다. Button.js 파일을 만들자 거기에 이렇게 넣어 보자!

import React, { Component } from react;

class Button extends Component {
    render(){
        return(
            <button>BUTTON</button>
        )
    }
}

그냥 위에서 배운 간단한 button 컴포넌트다. 그래도 이전에 만들었던 것 중에서 지금은 필요 없는 것들은 제외 했다.

import React, { Component } from react;
import ReactDOM from react-dom;
import Button from ./js/Button;

class AppMain extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                <Button />
            </div>
        );
    }
}
ReactDOM.render(<AppMain/>, document.getElementById(app));

그리고 컴파일을 해보자.

webpack

그리고 브라우저를 띄우면 에러가 난다. export를 안했다. 다시 button으로 가자! 맨 아래에 이렇게 추가 하자.

export default Button;

그리고 다시 컴파일을 해보자. 그리고 브라우저를 띄우면 버튼 한개가 있을 것 이다. 혹은 클래스앞에 키워드로 써도 된다.

export default class Button extends Component {
    render(){
        return(
            <button>BUTTON</button>
        )
    }
}

이렇게 써줘도 가능하다. 필자는 저렇게 후자 같이 썼다. 이렇게 react에 대해 알아봤다. 앵귤러도 배우고는 싶지만 지금당장은 필요 없을 것같다. 프론트는 리액트 하나로 족하다ㅜㅜ 이것으로 리액트에 대해 알아봤다.

참고 : webpack을 계속 치기 귀찮으니까 --watch 옵션으로 실시간으로 컴파일 하자!

webpack --watch