react 업그레이드 하기 17 -> 18 next 업그레이드 하기 12 -> 13

react와 next를 업그레이드 했다.

react upgrade

next upgrade

swc 설치 관련해서 권한 문제가 있어 윈도우 관리자 모드에서 설치하니 깔끔하게 깔렸다.

하지만 prosemirror 나 use-prosemirror 패키지랑 충돌이 되는것 같다. 한글이 깨진다. (이유를 모르겠음…) 결국 업그레이드 롤백함 ㅠㅠ 이후 use-prosemirror 한글 문제 해결해서 업그레이드 완료.

특이한 점

• next의 Link 에서 a 태그가 없어지는 걸로 바뀌었다. 기존에 a tag들이 있다면 next에서 제공하는 codemod 명령어로 한 방에 바꿀 수 있다.

• 업그레이드 후 모든 컴포넌트가 렌더링이 2번씩 되는 문제가 있었다. react 18 버전에서 StrictMode가 true 일 때 개발 환경에서 처음 로딩될 때 컴포넌트를 한 번 언마운트 시켰다가 리마운트 시키는 로직이 들어가서 그렇다고 한다. 이건 앞으로 상태값을 유지하면서 UI를 변경시키는 리액트의 기능이 생길 예정이라서 만들어놨다고 한다. 공식사이트 링크

  next.config.js 에서 reactStrictMode: false 로 바꿔주면 된다. (서버를 껐다 켜주자.)