Webpack 이해하기 (4) - react refresh 기능 추가하기

React Refresh 란?

코드가 중간에 수정 되더라도 컴포넌트의 state를 유지시켜주는 기능

Cf.) CRA(Create React App) 환경에서 셋업한 프로젝트는 기본 적용 되어있으므로 별도의 설정이 필요 없다.

Why should we use this ?

React app 개발을 하다보면 코드가 빈번히 수정되고 이 때마다 컴포넌트의 state가 초기화 되는 문제가 발생,

따라서 코드가 수정되더라도 컴포넌트 상태를 지속시켜주는 기능이 필요하다.

Solution

아래의 두 모듈을 설치

yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh

react-refresh

React의 Fast Refresh 기능을 구현하는 데 사용되는 모듈, 컴포넌트의 state를 유지하면서 개발 중에도 컴포넌트를 빠르게 리로드.

react-refresh-webpack-plugin

Webpack 환경에서 React의 Fast Refresh 기능을 활성화하기 위한 플러그인의 일종, Hot Module Replacement (HMR)를 지원하는데 특화되어 있으며, React 컴포넌트의 상태를 유지하면서 라이브 업데이트를 수행할 수 있게 해주는 역할.

Cf.) HMR (Hot Module Replacement) 란 ?

애플리케이션의 일부 코드(모듈)가 변경될 때 전체 페이지를 새로 고침하지 않고 해당 모듈만을 실시간으로 교체하는 기능.

예를 들어, React 컴포넌트를 수정할 때, HMR은 수정된 컴포넌트만을 교체하고 나머지 애플리케이션의 상태는 그대로 유지합니다.

• HMR이 없다면 코드 수정시 전체 페이지를 새로고침 한다. ( ⇒ 수정 코드만 실시간 교체 )
• react-refresh가 없다면 코드 수정시 기존의 상태를 잃어버림. ( ⇒ 코드 수정시 컴포넌트 state 유지 )

 

webpack.dev.js 파일에 설정을 추가

const webpack = require('webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin') // React의 Fast Refresh 기능을 Webpack과 통합하기 위한 플러그인 추가

module.exports={
  mode: 'development',
  devServer: {  // HMR 기능을 ON
    hot: true,
    open: true  // package.json의 scripts 옵션중 --open 삭제 가능 
  },
  devtool: 'cheap-module-source-map', 
  plugins: [ //대부분의 Webpack 플러그인은 클래스로 구현되어 있다.
    new webpack.DefinePlugin({ // 빌드 시간에 전역 상수를 생성하는 데 사용
      'process.env.name': JSON.stringify('Jake-Dev')
    }),
    new ReactRefreshWebpackPlugin(), // refresh 기능 위한 웹팩 플러그인 추가
  ]
  }

 

 

[요약]

1. React Fast Refresh는 React 컴포넌트의 상태를 유지하면서 라이브 업데이트를 수행하도록 도와주는 기능
   
   
2. 이 기능을 사용하기 위해서는 react-refresh 모듈과 웹팩 환경에서 사용할 수 있도록 도와주는 react-refresh-webpack-plugin 모듈이 필요
   
   
3. webpack으 HMR과 react-refresh 기능의 통합이 필요하기 때문에 webpack.dev.js의 설정이 필요하다 .

 

 

Minimum Requirement ( as of 23.12.20 )

최소 요구 사항

Reference

https://github.com/pmmmwh/react-refresh-webpack-plugin https://www.youtube.com/watch?v=xKQ2rEoYmXw&list=PLC3y8-rFHvwiWPS2RO3BKotLRfgg_8WEo&index=4