[React] React 프로젝트를 최신 버전으로 업데이트하려면?

노마드코더의 ReactJS로 영화 웹 서비스 만들기 강의를 듣고 있는데 4년 전에 한 번 들었던 강의여서 그때 만들어둔 레포가 있었다. 지금 보니까 커밋 컨벤션 같은 거 없이 그냥 썼었네 ...

새 레포를 만드는 게 마음 편하지만 괜시리 전에 만들어둔 레포를 써보고 싶은 마음에 어떻게 하면 사용할 수 있는지 전지전능한 GPT한테 물어보았다.

생각보다 거쳐야 하는 단계가 꽤 많았고, 불필요한 부분들까지 전부 안내되어 있어서 GPT를 구박하고 구박한 끝에 정말 꼭 해야되는 것들만 정리해서 블로그에 적어두려고 한다. 다음에 또 이런 일이 있을지도 모르니까 !

1) Git clone 및 의존성 확인

이전 레포를 활용하기 위해 우선 원하는 디렉토리에 레포를 clone 해주었다.

프로젝트 폴더로 이동한 후 의존성을 확인해주면 되는데 아래처럼 react, react-dom, react-scripts의 버전을 각각 확인해도 되고

npm list react
npm list react-dom
npm list react-scripts

package.json 파일을 열어서 세 가지 항목의 버전을 한 번에 체크해줘도 된다.

cat package.json

내 프로젝트의 경우, react와 react-dom의 버전은 '17.0.2', react-scripts의 버전은 '4.0.3' 이었다. 따라서 React 관련 패키지를 모두 최신 버전으로 업데이트 해주기 위해 아래 명령어를 실행했다.

npm install react@latest react-dom@latest react-scripts@latest

만약 다른 패키지도 모두 최신화 하고 싶다면 npx npm-check-updates -u 를 실행하면 된다고 하는데 나는 안해봤다.

2. index.js 파일 수정하기

React 17 이하의 프로젝트였기 때문에 ReactDOM.render()를 사용하고 있었다. index.js에서 해당 부분을 찾아 아래와 같이 수정해주면 된다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 프로젝트 실행하기

의존성을 업데이트하고, 업데이트한 버전에 맞게 코드를 수정해주고 나면 이제 npm start를 통해 프로젝트가 잘 실행되는지 확인만 하면 된다.