React Hot Loader Patch Warning 해결 방법

최근 React 버전을 최신으로 올리면서 브라우저 개발자 콘솔에서 불필요한 React Hot Loader Warning 로그가 찍힌다.

나와 같은 문제를 가지고 다양한 사람들이 React Hot Loader 이슈에 올렸고, 나는 그 이슈에 답변들을 보고 해결에 나섰다.

warning이 큰 문제는 아니고 React 버전에 따른 React Hot Loader 마이그레이션이라던지 Webpack 설정을 조금 바꿔 주면 되는 것이었다.

우선 새롭게 설치해야되는 Dependency로 @hot-loader/react-dom을 npm install --save-dev @hot-loader/react-dom로 설치해준다.

그런 다음 Webpack Rules 옵션에서 다음과 같은 Rule을 추가해준다.

{
    test: /\.(js|jsx|tsx|ts)?$/,
    include: /node_modules/,
    use: ['react-hot-loader/webpack'],
},

그런 다음 재기동 후 브라우저 개발자 콘솔을 확인해보면 더 이상 Warning 로그가 찍히지 않는다.