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를 사용할 수 밖에 없는 듯 하네요.
- React Native — 0.61 버전 이후 지원 관련 문서
- parcel 2 — alpha 3 버전 이후 지원 트윗
- webpack —
react-refresh-webpack-plugin을 사용하여 지원 (실험적임)
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) 여서 페이지가 리로드 되는 증상이 있었는데요, 아래와 같이 이름을 정의해줬더니 정상적으로 동작하였습니다.
감사합니다 :)
