create-react-app은 react 프로젝트를 빠르게 셋업할 수 있게 해주는 멋진 툴이다.
webpack, babel, lint등의 번거로운 설정이 이미 되어있는 프레임워크를 만들어주며 eject 명령어로 이 모든 것을 내 프로젝트로 고스란히 옮길 수 있기 때문에 자유도가 높다.
하지만 왜인지 react-hot-loader에 대한 설정은 빠져있어서 따로 추가를 해주어야 한다.
이 포스트에서는 create-react-app으로 생성한 프로젝트에 react-hot-loader를 추가해보겠다.
npm install -g create-react-app
create-react-app을 글로벌로 설치해준다.
$ create-react-app myProject
$ cd myProject
$ npm run eject
create-react-app 명령어로 myProject라는 리액트 프로젝트를 만든 다음, 프로젝트 폴더로 들어가서 eject 한다.
eject를 하기 전에는 설정들이 모두 내부에 숨겨져있지만 eject를 하고 난 이후에는 설정파일들이 외부로 노출되어 자유롭게 커스터마이징을 할 수 있게 된다.
npm install --save-dev react-hot-loader@next
react-hot-loader v3.0.0-beta.6 버전을 설치한다. @next를 붙이지 않으면 1.3버전이 설치되어 설정이 달라지므로 주의한다.
"babel": {
"presets": [
"react-app"
],
"plugins": [
"react-hot-loader/babel"
]
},
package.json파일의 "babel" object 내부에 "plugins"를 추가해주고, react-hot-loader/babel을 추가해준다.
module.exports = {
...
entry: [
'react-hot-loader/patch',
...
webpack.config.dev.js 파일의 entry 맨 위에 'react-hot-loader/patch'를 추가해준다.
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에서 컴포넌트의 내용을 수정해보면, 브라우저에서 새로고침 없이 수정내용이 반영되는 것을 확인할 수 있다.