React | 핫 리로딩 hot reloading 이란?

코드를 수정하고 반영하려면 npm run build를 통해 계속 빌드해줘야하는 문제가 있음

 

👉 핫리로딩을 통해 이를 해결할 수 있다!

 

 

핫 리로딩(hot reloading) 이란

- 앱을 처음부터 다시 시작하지 않고 새로운 코드 변경에 따른 코드 변경사항만 표시하며 변경된 코드에만 적용됨

- 리덕스처럼 상태가 변할 때처럼 부분적으로 리렌더링을 시키는 것과 동일한 역할

- 핫 리로드는 리덕스를 사용하지 않고 webpack의 핫 모듈을 통해서 핫 리로더 설정을 해서 사용

 

 

 

👉 이를 위해 서버가 필요

-D : 개발용

npm i webpack-dev-server -D

 추후 proxy 서버 역할도 해줘서 CORS 에러도 같이 해결해 준다.

 

 

아래 모듈도 같이 설치한다.

npm i webpack-cli

npm i -D @types/webpack-dev-server

npm i @pmmm/react-refresh-webpack-plugin

 

 

핫 리로딩을 위해 ReactRefreshWebpackPlugin도 받아야 함

npm i @pmmmwh/react-refresh-webpack-plugin

npm i react-refresh