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. 디자인과 개발의 영역을 조화롭게 표현할 수 있는 프론트엔드 개발의 매력에 빠진 사람, 황주성입니다 :)

Love podcasts or audiobooks? Learn on the go with our new app.

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

Jusung Hwang

13 Followers

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