5-2. 리액트 핫 로더 (react-hot-loader) 적용하기

개발을 좀 더 원할하게 하기 위해서, 프로젝트에 리액트 핫 로더를 적용하겠습니다.

$ yarn add react-hot-loader@next

그 다음엔, webpack 설정을 변경해야하니, eject 스크립트를 실행하세요.

$ yarn eject

이제 config 디렉토리의 webpack.config.dev.js 파일을 수정하겠습니다. react-hot-loader 를 적용 할 때에는 웹팩 설정에서 두가지 작업을 해주어야합니다. 첫번째는 babel 플러그인 추가이며, 두번째는 엔트리에 react-hot-loader/patch 를 삽입하는 것 입니다.

babel 플러그인 추가하기

`config/webpack.config.dev.js` - babel-loader

      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: ['react-hot-loader/babel'],
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
        },
      },

엔트리에 react-hot-loader 삽입하기

`config/webpack.config.dev.js` - entry

  entry: [
    require.resolve('react-dev-utils/webpackHotDevClient'),
    require.resolve('./polyfills'),
    require.resolve('react-error-overlay'),
    'react-hot-loader/patch',
    paths.appIndexJs,
  ],

설정을 마친다음엔 개발서버를 재실행하세요.

프로젝트 엔트리 파일에서 리액트 핫 로더 적용하기

리액트 핫 로더를 적용하려면 엔트리 파일에서 AppContainer 를 통하여 Root 컴포넌트를 적용해야하며, module.hot 관련 코드를 작성해야 합니다. 엔트리 파일을 다음과 같이 수정하세요.

`src/index.js`

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import configureStore from 'redux/configureStore';
import { AppContainer } from 'react-hot-loader';

const store = configureStore();

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Component store={store}/>
        </AppContainer>,
        document.getElementById('root')
    );
};

render(Root);

if(module.hot) {
    module.hot.accept('./Root', () => render(Root));
}

registerServiceWorker();

리덕스에서 모듈 핫 로딩하기

코드 핫 리로딩이 진행 될 때, 리덕스 관련 코드도 지원이 되도록 하려면 모듈을 불러오는 곳에서도 코드를 조금 수정해주어야합니다. configureStore.js 파일을 다음과 같이 수정하세요.

`src/redux/configureStore.js`

import { createStore } from 'redux';

import modules from './modules';

// Todo: 미들웨어 적용
const configureStore = (initialState) => {
    const store = createStore(modules, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

    // hot-reloading 를 위한 코드
    if(module.hot) {
        module.hot.accept('./modules', () => {
            const nextRootReducer = require('./modules').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

export default configureStore;

이제 react-hot-loader 가 적용되었습니다! 이제 코드가 변경될 때마다 페이지가 새로고침없이 업데이트 됩니다. 사용하면서 주의하실 점은, 만약에 컴포넌트의 메소드중 async/await 을 사용한 메소드를 수정하였더라면, 그 때는 임의로 새로고침을 해주세요.`

5-2. 리액트 핫 로더 (react-hot-loader) 적용하기