HMR (Hot Module Replacement)(작성중)

- HMR 이란?

• 개발 중 특정 코드 변경 시, 페이지 새로고침 없이 해당 부분만 리로드하는 것을 의미한다. 개발모드에서만 사용된다.(변경된 모듈: Hot Module)
• 코드가 변경 후 저장을 누르더라도, state 를 유지시켜준다.
• 수정한 결과가 표시되기까지 거쳐야 하는 여러 과정들을 생략할 수가 있다.
• 개발 시 생산성은 높이고 불필요한 대기시간을 없앨 수 있게 된다.

  예를들어, 검색로직에서 필터조건을 하나 추가했다고 가정해본다면,
  수정된 로직을 검증하려면 일반적으로 다음 과정들을 거쳐야 한다.

  코드수정 → 저장 → 새로고침 → 검색어 입력 → 검색버튼 클릭 → API 호출 → 데이터표시

HMR 을 이용하면, 4 단계를 생략하고 바로 필터 적용여부를 확인할 수 있다.

- HMR VS React-Hot-Loader

• HMR을 켜기 위해 React-Hot-Loader을 사용해야한다는 점은 오산

• RHL은 복잡한 방식으로 Webpack HMR API를 사용한다 ==> 프록시를 사용하기 때문
  ==> 빌드 구성에 따라 오류가 너무 다분하다는 단점

• SO HMR을 사용하면 구성 요소에 대한 업데이트가 다시 로드 사이에 구성 요소 상태를 유지하지 않지만 구현이 훨씬 간단 하고 안정적이다.

  ---

- HMR 사용법

• webpack-dev-server --hot --inline

옵션 --hot은 entry에 'webpack/hot/dev-server'를추가하고 plugin에 HotModuleReplacementPlugin를 추가한다.

여기에 HMR 코드 작성하기
webpack.config.js
App.jsx 에 HMR 적용
MFA 구조에서 HMR 적용

HMR 상태에서 000. jsx 파일을 수정했을 때 console 로그

참조: https://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/
https://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/