React 17에서 React 18로 업그레이드하기 (프로젝트 ver2.0 만들기)

이제 때가 되었다

웹사이트를 배포한 지 어느덧 2년이 되어가고 있습니다. 2년이란 시간은 꽤 길었습니다. 새로운 버전인 React18도 출시되고, 최근에는 Next.js13까지 세상에 나왔네요. 라이브러리의 버전을 업그레이드하는 동시에 나타날 수많은 에러와 마주하기 싫은 마음에 미루고 미뤄왔는데요. 더 늦어지기 전에 프로젝트를 업그레이드해줘야 할 것 같습니다.

버전을 업그레이드하는 김에 코드를 개선하는 작업도 하려고 합니다. 언젠가 해야지 생각만 해두었던 작업들을 나열해 보았습니다. 큼지막하다고 생각하는 것들은 아래 세 가지 정도 되네요. 한꺼번에 하기보다는 시간차를 두고 하나씩 해보려고 합니다.

 

1. React17에서 React18로 업그레이드하기 - 오늘 진행할 작업입니다. 부디 너무 힘들지 않기를..
2. Next.js13 적용하기 - 이 프로젝트는 정적 페이지가 대부분이라서 SSG를 적극 적용하여 웹성능을 개선하고 SEO도 챙기려고 합니다.
3. Redux 대신 Recoil 적용하여 전역상태 관리하기 - 이 프로젝트에서 Redux는 과한 스펙이었네요.

 

오늘은 대장정의 첫번째인 React17에서 React18로 갈아타는 작업을 하려고 합니다.

 

React17에서 18로 업그레이드하기

천 리 길도 한 걸음부터. 최신 버전의 React를 설치해줍니다. 이미 프로젝트가 있는 상태이기 때문에 @latest로 최신 버전을 설치해주었습니다.

npm install react@latest react-dom@latest

 

프로젝트를 실행하자 뜻밖에 처음 마주한 에러는 node-sass 관련 에러입니다.

node-sass는 deprecated되어서 삭제하고 대신 sass(dart sass)를 설치합니다.

 

그리고 이제 본격적으로 업그레이드를 해볼까요. 에러 투성이입니다. 빨간줄을 한놈씩 격파할 생각을 하니 설레는군요.

 

의존성이 무너진 다른 라이브러리들에 대해서는 npm audit fix를 반복해서 npm이 패키들을 알아서 업데이트 해주도록 합니다. 라이브러리 버전만 업데이트 해줄 수 있다면 아주 다행입니다.

그렇지 않고 breaking change가 생긴 라이브러리는 좀더 섬세하게 관리해줘야 합니다. 이러한 라이브러리를 업데이트하면 이를 사용해서 작성한 코드도 같이 수정을 해줘야 할 것 같네요. 제 프로젝트에서 breaking change가 생긴 라이브러리들은 아래와 같았습니다.

 

1. react-reveal
2. @fontawesome
3. react-quill

 

1. react-reveal

텍스트에 애니메이션 효과를 주기 위해서 사용하던 것입니다. 도입할 당시만 해도 활발했었는데 마지막 커밋이 2018년으로, 더이상 관리를 하지 않는 것으로 보이네요.

우선은 코드상에서 애니메이션 효과를 없애기로 합니다. 어차피 이 프로젝트는 디자인도 제가 하기 때문에 자유도가 높습니다.(하하) 우선 애니메이션을 없애고 이후에 전체적으로 디자인을 손본 후에 대체할 라이브러리를 추가하거나, 직접 코드를 작성해서 애니메이션을 구현하기로 합니다.

 

2. @fontawesome

svg 아이콘을 위해 사용한 것인데 그냥 다른 라이브러리를 사용하면 되겠군요. 오히려 좋습니다. 이 기회에 훌륭한 대체제인 react-icons로 갈아타기로 합니다.

 

3. react-quill

텍스트 에디터이고 갈아탈 생각이 없습니다. (리액트 퀼을 사수하라!) 코드를 수정해서 breaking change에 대응하도록 하겠습니다. (이것은 직접 최신 버전으로 설치해주니 문제없이 작동하는군요)

 

결론

React 17에서 리액트 18로 업그레이드하는 것은 생각했던 것보다 수월하게 끝났네요. react-reveal 라이브러리 및 애니메이션을 그냥 없애기로 결정한 덕분입니다. 관련된 페이지가 적었기 때문에 가능했습니다.

 

참조

node-sass에서 sass로 마이그레이션하기