[react] CRA로 만든 프로젝트 eject없이 hot-loader 적용하기

React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면)

 

다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다.

 

이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다.

(cra eject는 되돌릴 수 없다는 게 큰 마음의 걸림돌이다)

 

따라서 본 포스팅에서는 CRA 보일러 플레이트에서 eject없이 react-hot-loader적용 방법을 기술한다.

 

react-hot-loader

 

시작하기 전에, react-hot-loader는 무엇인고 하니...

 

React를 통한 웹 개발환경에서는 UI컴포넌트의 작은 수정에도 페이지의 새로고침이 일어난다.

 

해당 페이지가 별로 무겁지 않고 통신을 통한 비동기 처리도 없다면 큰 상관이 없지만, 그렇지 않다면 작은 수정에도 매번 2~3초를 기다려야 그 결과를 확인할 수 있다.

 

UI 컴포넌트의 모든 수정사항 확인을 storybook 같은 곳에서는 할 수 없으니, 현실적으로 이런 상황에서 잡아먹는 시간이 은근히 많다.

 

테스트가 잦은 상황에서는 이렇게 소모되는 2초,3초가 모여 1분~2분이 된다.

 

이렇게 허비되는 1분~2분이 모여 가정이 무너지고... 사회가 무너지고... 가정이 황폐화되고... 이러한 현실 속에서... 는 아니고 그냥 새로고침이 돌아가는걸 보면 내가 답답해서 못 참을 지경이 되었다.

 

---

이런 상황에서 hot-loader를 적용하면 뭐가 달라질까?

 

react-hot-loader는, state를 건드리지 않는 상황에서 바뀐 react구성 요소만을 파악해 실시간으로 다시 로드시켜주는 라이브러리이자 babel 플러그인이다.

 

Getting Started · React Hot Loader

참 신기하다... webpack dev 서버에서 변경사항에 대해 watch 하고 있다가 바로바로 렌더 해주는 방식인 것 같다.

 

감탄은 감탄이고 Getting Start를 읽어보면 알겠지만, 시작하기가 만만치 않다. 특히나 webpack.config.js를 설정하는 내용이 있고 client의 entry point도 건드린다고 하니 CRA로 시작해서 아직 webpack과는 친하지 않은 나 같은 사람은 겁부터 나기 마련이다.

 

잡소리가 길었다. 그래서 어떻게 하냐면?

 

1. 의존성 3형제를 설치해준다. 하나도 빠짐없이.

$ yarn add react-app-rewire-hot-loader react-app-rewired react-hot-loader

cdharris/react-app-rewire-hot-loader

CRA에서 rewired를 통한 hot-loader 설치가 가능하게 해주신 charris 친구에게 감사를...

 

2. 프로젝트 최상위(root)위치에 config-overrides.js 파일 생성 후 아래 내용을 넣는다.

const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override (config, env) {
  config = rewireReactHotLoader(config, env)
  return config
}

3. App.js 파일 수정

import React from 'react'
// 추
import { hot } from 'react-hot-loader/root'
// 가

const App = () => <div>Hello World!</div> //이건 당연히 예제겠죠?

// env를 통한 환경설정을 하고 있다고 가정. 딱히 배포계획이 없는 개인 프로젝트라면
// 일단 그냥 hot(App)으로 감싸고 테스트해보시길
export default process.env.NODE_ENV === "development" ? hot(App) : App

4. react-app-rewired start으로 실행

react-app-rewired start명령어로 실행하면 테스트가 된다. 나는 yarn hot으로 편하게 실행하려고 스크립트를 추가했다.

//*package.json에 스크립트 추가 *//

"hot" : "react-app-rewired start",

 

 

끝!

 

새로고침 없이 UI컴포넌트의 수정이 즉각적으로 일어나는 부분을 확인할 수 있다.

 

여담으로, 오랜만에 다시 npm에 방문해보니 react-hot-loader는 앞으로 사라질 것 같다.

 

webpack 사용자를 위한 react-refresh-webpack-plugin을 소개하고 있지.... 만! 아직 릴리즈 버전은 아니고 안정화 중인 베타라는 점을 명심하길 바란다.

pmmmwh/react-refresh-webpack-plugin

통합된다는 react-fast-refresh가 뭔지, 왜 통합하려고 하는지, 어떤 부분이 바뀌는지에 대해서는 아래 issue에 잘 정리되어 있는 것 같다.

 

How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader? · Issue #16604 · facebook/react

 

그럼 오늘도 이만.