react-hot-loader 소개

react-hot-loader란?

webpack-dev-server를 돌릴 때 서버를 다시 돌릴 필요 없어 변경 사항을 바로 refresh 해주는 역할을 한다.

Install 

npm install --save react-hot-loader

How?

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', () => {
    render(App)
  })
}

module:
    {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot','babel?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015', 'stage-0', 'react']
                })], // query 부분은 babel에 대한 내용이기 때문에 다음과 같이 진행
                exclude: /node_modules/,
            }
        ]
    },
    plugins : [
        new webpack.HotModuleReplacementPlugin()
    ]

webpack.config.js 부분에서 loaders 부분에 가지고 올 모듈들이 둘 이상이 되므로 loaders로 정의해준다.

다음과 같이 babel 부분은 query에 cacheDirectory , presets 부분만 따로 babel에 추가해준다. 

실험 코드 

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: " "
        }
        this.nameClick = this.nameClick.bind(this);
    }

    nameClick() {
        this.setState({
            name: this.state.name = "seongho!"
        })
    }

    render() {
        return (
            <div>
                <button onClick={this.nameClick}> Click me!!!!!</button>
                <h2>Hello !! {this.state.name}</h2>
            </div>
        )
    }
}

다음 코드는 Test 클래스를 rendering 하는 과정인데, 버튼을 클릭할 경우 state 변수의 name 값이 바뀌는 것이다.

원래는 버튼을 클릭하면 state값이 바뀌고 그 외 다른 부분을 바꿨을 때에는 

버튼 클릭 후 바뀌는 부분 마저도 누르기 전으로 바뀌게 된다.

하지만 react-hot-loader를 사용한다면 버튼이 누른 뒤 바뀌는 값 그대로 유지되면서

상태가 바뀌게 된다.

물론 이 후에 router 부분이 추가되고 심화 작업이 진행되면 적용이 종종 안되는 경우가 있어서 페이지를 새로고침 해야 하기는 하지만, 기본적으로 react-hot-loader를 활용한다면 새로고침 없이도 local-state도 유지되면서 reload 된다.

이 후에 좀 더 작업을 진행하면서 추가로 심화 작업을 포스팅하겠습니다.

감사합니다! 

(Create React App Guide도 포함되어 있습니다)

https://github.com/Haamseongho/React_Study/tree/haams/hot_md_replacement