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