React Fast Refresh 적용하기

최근 react-hot-loader를 적용한 리액트 환경에서 MirageJS를 적용하다 동작이 되지 않아 확인해보니 react-fast-refresh를 사용하면 된다는 댓글을 확인하여 react-fast-refresh 라는 것을 알아보게 되었습니다.

관련 코드는 nabigraphics/react-fast-refresh-webpack-plugin-example에 올려두었습니다.

React Fast Refresh?

react-fast-refresh는 기존 react-hot-loader의 제한적인 부분들을 개선하기 위해 만들어진 녀석입니다.

현재는 아래의 3개의 환경에서 Fast Refresh를 사용할 수 있으며,
그 외에는 일단 react-hot-loader를 사용할 수 밖에 없는 듯 하네요.

Fast Refresh 적용

저는 기존에 webpack+babel 환경에서react-hot-loader를 사용하고 있었기에 react-refresh-webpack-plugin을 사용하여 적용해 보았습니다.

플러그인의 경우 아래와 같이 최소 버전을 요구하고 있기 때문에 확인하고 올려 주시면 될 것 같습니다.

  • react — 16.9.0 (권장 16.3.0+)
  • react-dom — 16.9.0 (권장 16.3.0+)
  • webpack — 4.43.0 (권장 4.43.0+)
  • *reconciler를 사용하는 경우 react-reconciler — 0.22.0 (권장 0.25.0+)

react-hot-loader 제거

기존에 사용하던 react-hot-loader/babel@hot-loader/react-dom관련 셋팅을 제거했습니다.

그 외에는 우측 링크를 통해 확인해 보실 수 있습니다. (링크)

패키지 설치

webpack 플러그인과 react-refresh를 설치해 줍니다.
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

만약 타입스크립트를 사용한다면 플러그인 peerDependencies에 type-fest가 있으므로 type-fest까지 설치해 줍니다.
npm install -D type-fest

webpack.config.js 설정

성공!✨

추가적으로 react-refresh를 설정했는데 제대로 동작하지 않는 경우에는Troubleshooting guide를 확인해 보면 좋습니다.

저같은 경우엔 사용하던 HOC가 이름이 없는 컴포넌트(Un-named/non-pascal-case-named components) 여서 페이지가 리로드 되는 증상이 있었는데요, 아래와 같이 이름을 정의해줬더니 정상적으로 동작하였습니다.

감사합니다 :)

--

--

Web Frontend Developer. 디자인과 개발의 영역을 조화롭게 표현할 수 있는 프론트엔드 개발의 매력에 빠진 사람, 황주성입니다 :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jusung Hwang