[NextJS] Fast refresh가 작동하지 않을 때 (React 18)

React 18이 정식으로 릴리즈되어서

모든 버전을 최신으로 업데이트하면 Hot reloading이 잘 작동합니다!

 

NextJS는 Fast refresh를 기본 기능으로 제공한다. (https://nextjs.org/docs/basic-features/fast-refresh)

 

패스트 리프레시란?

스타일 등의 컴포넌트를 변경할 때 빠른 리프레시는 매우 편리합니다. 현재 페이지에만 앱을 로드합니다. 대부분의 편집은 1~2초 이내에 표시됩니다.
핫 새로고침은 앱을 실행 상태로 유지하고 런타임에 편집한 파일의 새 버전을 주입하는 것입니다.
Fast Refresh의 경우 React 컴포넌트만 내보내는 모듈을 편집하면 Fast Refresh는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다.
React 컴포넌트가 아닌 내보내기 모듈을 편집하면 Fast Refresh는 해당 모듈과 해당 모듈을 Import하는 다른 모듈 모두를 다시 실행합니다.
React 트리 이외의 모듈에 의해 Import된 파일을 편집하면 Fast Refresh는 완전한 새로고침으로 돌아갑니다.
즉, 핫 새로고침보다 더 크고 많은 기능을 제공.

(https://stackoverflow.com/questions/59085281/difference-between-hot-reload-and-fast-refresh-in-react-native)

 

쉽게 얘기하면 CSS스타일링 등 컴포넌트를 변경할때 nodeJS의 nodemon처럼 페이지 새로고침 없이 코드 변경을 re-render해줌

 

중요한건,

당근마켓 클론코딩을 하면서 리액트18의 rc버전을 사용했는데, 이런 패스트 리프레시(핫리로드)가 작동하지 않는 것이었다.

 

구글에 hot reload not working, fast refresh not working을 검색해봐도

컴포넌트, 모듈의 철자(case) 오타가 원인인 케이스만 검색됐다.

그러나 내 경우는 import export 되는 컴포넌트 명에는 오탈자가 없었고,

 

노마드코더 강의 댓글에서 찾은 해결책은 버전 문제였다. 

무슨 문제에선지

    "next": "^12.1.1",
    "react": "^18.0.0-rc.3",
    "react-dom": "^18.0.0-rc.3"

위 버전에서는 패스트 리프레시가 작동하지 않는다.

 

    "next": "^12.0.7",
    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0"

넥스트와 리액트 rc버전 모두를 위와 같이 downgrade하고 나서야 정상작동 됨을 확인했다.

 

넥스트JS가 제공하는 패스트 리프레시가 작동하지 않는 분들은

1. 컴포넌트의 오탈자(특히 대소문자) 확인

2. 넥스트와 리액트의 버전 확인을 해보면 좋을듯하다.