create-react-app은 react 프로젝트를 빠르게 셋업할 수 있게 해주는 멋진 툴이다.

webpack, babel, lint등의 번거로운 설정이 이미 되어있는 프레임워크를 만들어주며 eject 명령어로 이 모든 것을 내 프로젝트로 고스란히 옮길 수 있기 때문에 자유도가 높다.

하지만 왜인지 react-hot-loader에 대한 설정은 빠져있어서 따로 추가를 해주어야 한다.

이 포스트에서는 create-react-app으로 생성한 프로젝트에 react-hot-loader를 추가해보겠다.

 

create-react-app 설치하기

npm install -g create-react-app

create-react-app을 글로벌로 설치해준다.

 

crate-react-app으로 프로젝트 생성하기

$ create-react-app myProject
$ cd myProject
$ npm run eject

create-react-app 명령어로 myProject라는 리액트 프로젝트를 만든 다음, 프로젝트 폴더로 들어가서 eject 한다.

eject를 하기 전에는 설정들이 모두 내부에 숨겨져있지만 eject를 하고 난 이후에는 설정파일들이 외부로 노출되어 자유롭게 커스터마이징을 할 수 있게 된다.

 

react-hot-loader 설치하기

npm install --save-dev react-hot-loader@next

react-hot-loader v3.0.0-beta.6 버전을 설치한다. @next를 붙이지 않으면 1.3버전이 설치되어 설정이 달라지므로 주의한다.

 

react-hot-loader 적용하기

package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
},

package.json파일의 "babel" object 내부에 "plugins"를 추가해주고, react-hot-loader/babel을 추가해준다.

 

webpack.config.dev.js

module.exports = {
  ...
  entry: [
    'react-hot-loader/patch',
...

webpack.config.dev.js 파일의 entry 맨 위에 'react-hot-loader/patch'를 추가해준다.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import {AppContainer} from 'react-hot-loader';

const rootEl = document.getElementById('root');

ReactDOM.render(
    <AppContainer>
        <App />
    </AppContainer>,
    rootEl
);

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default; // eslint-disable-line global-require
        ReactDOM.render(
            <AppContainer>
                <NextApp />
            </AppContainer>,
            rootEl
        );
    });
}

webpack entry point인 index.js파일을 위와 같이 변경해서 hot loader를 적용한다.

 

개발서버 띄우기

npm start

-------------------------------------------------
Starting the development server...

You can now view cra in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.75.1:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

이제 react-hot-loader가 적용되었다.

IDE에서 컴포넌트의 내용을 수정해보면, 브라우저에서 새로고침 없이 수정내용이 반영되는 것을 확인할 수 있다.