gaearon/react-hot-loader v4 적용해 봤어요.

https://github.com/gaearon/react-hot-loader/tree/next

결론은 좋네요!

react-transform-hmr을 사용해서 핫로딩을 사용하는 프로젝트가 있었는데요.

이 프로젝트가 SSR 등으로 구조가 매우 복잡해서 예전에 react-hot-loader v3로 마이그레이션 하다가 실패했거든요.

이번에 프로젝트를 리빌드 하면서 react-hot-loader v4가 beta 22 까지 나왔길래 용기내서 적용했습니다.

SSR 때문에 .babelrc는 건드리지 않고, webpack에서 babel-loader에 적용하는 방식으로 하고요.

ReactDOM.hydrate (or render)에 들어가는 컴포넌트를 hot 으로 감싸서 넣으니 쿨하게 잘 동작하네요.

1개의 좋아요

이것 베타가 아닌걸 쓰면 잘 안되더라구요. 어서 베타가 정식으로 변경되길~ 바래요

며칠전에 보니 next branch가 RC가 되었더군요.
:+1:
2018년 2월 25일 (일) 오후 12:49, Thomas [email protected]님이 작성:

드디어 나왔네요. 하지만 아쉽게도 import hot 이 먼저 선언되어야 잘되는 이상한 버그는 여전합니다.
ㅎㅎ 제 환경이 이상한 것 같아요. 제보를 한번 해볼까

https://github.com/gaearon/react-hot-loader#appcontainer 이것 index에서 싸주니까 해결 되었습니다.

이게 원래 예제에 있었나??

AppContainer는 원래 3.x 예제에 있었는데요. 저는 사용하지 않아서요ㅎㅎ
아무튼 한번 감싸서 해결되었군요!

4.x에서는 hot을 권장하는 거 맞나요? 어디선가 그런 내용을 봤던 것 같긴한데 기억이 안나네요.

그리고 redux의 reducer를 hot loader가 되도록 명시적으로 설정하면 신기하게 한번만 정상적으로 핫로딩되고 두번째부터는 바꾼 코드가 반영이 안되더군요.

제가 했던 방식은 대략 아래와 같은 방식입니다. 혹시 비슷한 문제를 겪어보셨나요? :slight_smile:

import { createStore } from 'redux'

import rootReducer from './reducers'

const configureStore = () => {
  const store = createStore(rootReducer)

  if (process.env.NODE_ENV !== "production") {
    if (module.hot) {
      module.hot.accept('./reducers', () => {
        store.replaceReducer(rootReducer)
      })
    }
  }

  return store
}

export default configureStore```

v4 부터 hot이 생기면서, 이것을 사용하는 것으로 문서가 바뀌었죠.
저는 프로젝트가 v3의 module.hot.accept 로는 아예 동작하지 않는 상태였어요.

import { hot } from 'react-hot-loader';

const App = hot(module)(component);
ReactDOM.hydrate(<App />, dest);

이렇게 쓰고 있어요.

hot(module)(component) 말고 신경쓸게 없던데요.