react-hot-loader 적용하기

react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 개발도구는 아니지만, 앱의 규모가 커지면 개발서버가 수정될때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 1~6초씩 끊길 수도 있습니다. 특히, styled-components 를 사용하게 되는 경우엔, 스타일이 JS 안에 있어서, 스타일을 수정 할 때마다 새로고침이 된다는게 조금 불편할수도 있겠죠.

이렇게 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 코드를 조금 건들여주면 가능합니다. 하지만, 어플리케이션의 state 를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있습니다.

설치하기

yarn eject 를 하고, react-hot-loader 를 설치하세요.

$ yarn eject
$ yarn add --dev react-hot-loader

설치가 완료된 다음에는, config/webpack.config.dev.js 에서 다음과 같이 babel 설정하는 부분을 변경해주세요.

package.json

  {
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {

      // 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,
      plugins: ['react-hot-loader/babel'],
    },
  },

만약에 자신이 eject 를 하기 싫다! 그렇다면 https://github.com/cdharris/react-app-rewire-hot-loader 를 참고해보세요.

hot 설정하기

그 다음엔, 프로젝트의 최상위 컴포넌트(지금의 경우엔 App 이 되겠죠?) 에서 hot 을 불러온 뒤 내보낼 때 hot(module)(App) 형식을 작성해주시면 됩니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { hot } from 'react-hot-loader'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload!
        </p>
      </div>
    );
  }
}

export default hot(module)(App);

정리

벌써 끝났습니다! react-hot-loader v4 가 되면서 작업이 굉장히 간단해졌습니다. 이전에는 설정해야 할 것이 꽤 있었거든요. 저의 경우에는 실무에서 react-hot-loader 를 잘 사용하지 않습니다. 개발을 하게 될 때 없어도 별로 큰 지장이 되지 않거든요 (어짜피 페이지는 파일 저장하면 새로고침이 트리거되기 때문입니다). 만약에 프로젝트에서 사용을 하게 된다면, 코드를 저장 할 때마다 페이지를 새로고침하는것이 거슬리기 시작 할 때 쯤 도입을 하는것을 추천드립니다.