<div id="readability-page-1" class="page"><div><div><p><a rel="noopener follow" href="/?source=post_page-----d68dab89da57-----------------------------------"><img alt="Jusung Hwang" src="https://miro.medium.com/fit/c/56/56/1*3sz0SF37ibwm-BAopfwAfQ.png" width="28" height="28"></a></p></div><p id="fe23">최근 react-hot-loader를 적용한 리액트 환경에서 MirageJS를 적용하다 동작이 되지 않아 확인해보니 react-fast-refresh를 사용하면 된다는 댓글을 확인하여 react-fast-refresh 라는 것을 알아보게 되었습니다.</p><p id="89cd">관련 코드는 <a href="https://github.com/nabigraphics/react-fast-refresh-webpack-plugin-example" rel="noopener ugc nofollow" target="_blank">nabigraphics/react-fast-refresh-webpack-plugin-example</a>에 올려두었습니다.</p><h2 id="52bf">React Fast Refresh?</h2><p id="def9">react-fast-refresh는 기존 react-hot-loader의 제한적인 부분들을 개선하기 위해 만들어진 녀석입니다.</p><p id="051c">현재는 아래의 3개의 환경에서 Fast Refresh를 사용할 수 있으며,<br>그 외에는 일단 react-hot-loader를 사용할 수 밖에 없는 듯 하네요.</p><ul><li id="dd05">React Native — 0.61 버전 이후 지원 <a href="https://facebook.github.io/react-native/docs/fast-refresh" rel="noopener ugc nofollow" target="_blank">관련 문서</a></li><li id="443a">parcel 2 — alpha 3 버전 이후 지원 <a href="https://twitter.com/devongovett/status/1197187388985860096" rel="noopener ugc nofollow" target="_blank">트윗</a></li><li id="c51f">webpack — <code><a href="https://github.com/pmmmwh/react-refresh-webpack-plugin/" rel="noopener ugc nofollow" target="_blank">react-refresh-webpack-plugin</a></code> 을 사용하여 지원 (실험적임)</li></ul><h2 id="c730">Fast Refresh 적용</h2><p id="2351">저는 기존에 webpack+babel 환경에서react-hot-loader를 사용하고 있었기에 react-refresh-webpack-plugin을 사용하여 적용해 보았습니다.</p><p id="4b9b">플러그인의 경우 아래와 같이 최소 버전을 요구하고 있기 때문에 확인하고 올려 주시면 될 것 같습니다.</p><ul><li id="a44e">react — 16.9.0 (권장 16.3.0+)</li><li id="4e01">react-dom — 16.9.0 (권장 16.3.0+)</li><li id="c69f">webpack — 4.43.0 (권장 4.43.0+)</li><li id="dae9">*reconciler를 사용하는 경우 react-reconciler — 0.22.0 (권장 0.25.0+)</li></ul><h2 id="00a7">react-hot-loader 제거</h2><p id="385a">기존에 사용하던 <code>react-hot-loader/babel</code> 및 <code>@hot-loader/react-dom</code>관련 셋팅을 제거했습니다.</p><blockquote><p id="c49e">그 외에는 우측 링크를 통해 확인해 보실 수 있습니다. <a href="https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#coming-from-react-hot-loader" rel="noopener ugc nofollow" target="_blank">(링크)</a></p></blockquote><h2 id="3995">패키지 설치</h2><p id="1315">webpack 플러그인과 react-refresh를 설치해 줍니다.<br><code>npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh</code></p><p id="56fb">만약 타입<span id="rmm"><span id="rmm">스</span></span>크립트를 사용한다면 플러그인 peerDependencies에 type-fest가 있으므로 type-fest까지 설치해 줍니다.<br><code>npm install -D type-fest</code></p><h2 id="ed61">webpack.config.js 설정</h2><figure></figure><h2 id="b7c1">성공!✨</h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*vuabdn4wLM_2FMZJPfpCWQ.png" width="700" height="528" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*vuabdn4wLM_2FMZJPfpCWQ.png?q=20"></p></div></figure></div></div>

Stories by Jusung Hwang on Medium

최근 react-hot-loader를 적용한 리액트 환경에서 MirageJS를 적용하다 동작이 되지 않아 확인해보니 react-fast-refresh를 사용하면 된다는 댓글을 확인하여 react-fast-refresh 라는 것을 알아보게 되었습니다.
관련 코드는 nabigraphics/react-fast-refresh-webpack-plugin-example에 올려두었습니다.
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 설정
https://medium.com/media/17c56695cd43455d3f5e9b7bdd10aa51/href
성공!✨
추가적으로 react-refresh를 설정했는데 제대로 동작하지 않는 경우에는Troubleshooting guide를 확인해 보면 좋습니다.
저같은 경우엔 사용하던 HOC가 이름이 없는 컴포넌트(Un-named/non-pascal-case-named components) 여서 페이지가 리로드 되는 증상이 있었는데요, 아래와 같이 이름을 정의해줬더니 정상적으로 동작하였습니다.
https://medium.com/media/9d4f69d2dba4eb97457fde143f48abf5/href
감사합니다 :)

React Fast Refresh 적용하기

댓글