(React & Express 를 이용한 웹 어플리케이션 개발하기) 4일차 - React-Hot-Loader

Webpack-dev-server 모듈을 사용하여 소스코드가 수정될때마다 화면을 새로고침하여 변경점을 반영하지 않고

해당 컴포넌트에 수정사항만 찾아 화면에 반영해준다.

 

그러나 별도의 설정을 따로 작성해주지 않으면 전체 페이지를 새로고침을 해버리는데

그 이유는 Webpack이 어떤 파일을 어떤 상황에 바꿔야할지 정의를 해주지 않았기 때문이다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const rootElement = document.getElementById('root');
ReactDOM.render(<App/>, rootElement);

// Webpack 정의
if(module.hot){
    module.hot.accept();
}

index.js 의 하단에 따로 정의해준다면 정상적으로 전체 페이지를 새로고침하지 않고 수정된 부분만 화면에 반영하여 준다.

 

그러나 이 경우에도 state의 값을 보존하지 못하는 문제점이 발생한다.

import React from 'react';

class App extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            number: 0
        };
    }

    render(){
        return (
            <div>
                <div>Hello!! {this.state.number}</div>
                <br/>
                <button onClick={() => {this.setState( { number:this.state.number+1} )}}>버튼</button>
            </div>
        );
    }
}

// ES6의 문법
// module.export = App; 와 같은 의미
export default App;

number state

내가 버튼을 눌러 state의 값을 늘려봤자 한 글자라도 수정한다면 state의 값은 다시 0으로 초기화 되어버린다.

 

...

    module: {
        // react나 ES6(es2015) 형식을 일반 JS형식으로 변환해줌
        loaders: [
            {
                test: /\.js$/,
                // react-hot-loader를 배열로 추가, loader -> loaders
                // 기존의 query의 json 값들을 babel에만 적용시키기위해 아래와 같이 사용
                loaders: ['react-hot', 'babel?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                })],
                exclude: /node_modules/
            }
        ]
    },
 
 ...

webpack.config.js 에서 module 부분에 react-hot-loader를 적용시키기 위해 위와 같이 수정해준다.

기존에 babel만 되어있는 loader를 lodaers 라고 하고 배열로 변환해준다.

그리고 이전에 있던 query의 값을 babel에서만 사용할 수 있도록 babel 쿼리 스트링으로 변환하여 준다.'

 

수정 후 서버를 재시작한다면 webpac-dev-server가 다시 컴포넌트만 수정하여도 state도 살아있는것을 확인 할 수 있다.