React Hot Loader 설정법

react-hot-loader란? React Component에서 코드가 변경 되었을 때 view에서 local state가 사라지는데 코드가 변경 되어도 local state가 유지 되도록 도와주는 모듈

webpack.config.js 수정하기

// 변경 전
module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                  cacheDirectory: true,
                  presets: ['es2015', 'react']
                }
            }
        ]
    },

// 변경 후
module: {
    loaders: [
        {
            test: /\.js$/,
            // string 형태의 loader를 loaders로 이름 바꾸고 배열 형태로 변환 
            // 'react-hot-loader 추가'
            // babel-loader만 썼을 경우엔 query로 값을 전달 할 수 있었지만
            // loader가 많아지면서 babel-loader뒤에 ?string의 형태로 query를 붙여줘야 한다. 
            loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({
                cacheDirectory: true,
                presets: ['es2015', 'react']
            })],
            exclude: /node_modules/,
        }
    ]
},

Component 의 constructor가 변경 될 경우 hot-reload 기능 말고 새로고침을 해줘야 한다.