react-hot-loader란?

http://gaearon.github.io/react-hot-loader/

HMR (HotModuleReplacement)

react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침 하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리이다. 앱의 규모가 커지면 개발서버가 수정될 때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 몇초씩 끊길 수도 있다.

 

자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 가능하다. 하지만, 어플리케이션의 state를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있다. (단, 컴포넌트의 메소드중 async/await을 사용한 메서드를 수정했다면 새로고침을 해주자.)

 

react-hot-loader는 v3와 v4 버전이 존재한다. v4이전 버전인 v3의 React Hot Loader를 설정하는 올바른 방식은 AppContainer로 감싸주어서, 허용 모듈을 직접 설정하는 방법이었다. 이 방식은 아직도 유효하지만, 고급 예제이다. 보통의 경우는 hot 문법을 권장한다.

 

React Hot Loader v3:

// App.js
import React from 'react';

const App = () => <div>Hello world!</div>;

export default App;

 

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import App from './containers/App';

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

render(App);

// webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    // if you are using harmony modules ({modules:false})
    render(App);
    // in all other cases - re-require App manually
    render(require('./containers/App'));
  });
}

 

React Hot Loader v4:

// App.js
import React from 'react';
import { hot } from 'react-hot-loader';

const App = () => <div>Hello world!</div>;

export default hot(module)(App);

 

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';

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