오늘은 리액트 버전 낮추는 방법에 관해 알아보겠습니다. 진행하며 발생할 수 있는 오류까지 자세히 살펴볼 예정입니다.
종속성 문제 때문에 최신 버전이 아닌 리액트를 사용해야 하는 경우가 종종 있는데, 저도 그런 상황이어서 직접 공부한 내용을 포스팅하게 되었습니다.
리액트 버전 낮추기(변경/다운그레이드)
일반적으로 다음과 같이 npx create-react-app으로 리액트 앱을 만드실 겁니다.
npm start 또는 yarn start로 실행하게 되면 정상적으로 잘 컴파일된 것을 확인할 수 있습니다.
리액트는 개발할 때 이용할 수 있게 자동으로 프론트 쪽 서버를 제공해주는데요, 아래와 같이 localhost:3000에서 확인이 가능합니다.
그런데 상황에 따라 더 낮은 버전의 리액트를 사용해야 할 수 있습니다. 저의 경우 package.json을 보면 react와 react-dom 버전이 18.1.0인 것을 확인할 수 있습니다.
버전 변경은 아주 간단하게 명령어 하나로 해결 가능합니다. 아래와 같이 npm install react@^[버전 정보] react-dom@[버전 정보] 명령을 통해 변경할 수 있습니다. 저 같은 경우는 17.0.2로 낮추고 싶어서 해당 버전으로 진행했습니다.
이제 버전이 변경되었는지 다시 package.json을 확인해봅시다.
정상적으로 17.0.2로 바뀐 것을 확인할 수 있습니다. 이제 다시 npm start하여 실행해보도록 하겠습니다.
갑자기 오류 메시지를 출력하며 컴파일이 안 된다고 합니다. 분명 버전은 잘 바뀌었는데 무슨 문제일까요? 해당 내용도 바로 살펴보도록 하겠습니다.
리액트 버전 변경 오류 해결
1. react-dom/client 문제 해결
앞선 오류 메시지를 다시 한번 잘 살펴보도록 하겠습니다. 해당 내용은 콘솔뿐만 아니라 localhost:3000에서도 확인이 가능합니다.
ERROR in ./src/index.js 라는 문구를 확인할 수 있는데, 해당 코드를 직접 살펴보겠습니다. 아래를 보면 import ReactDOM from 'react-dom/client'; 라는 코드를 확인할 수 있습니다.
react-dom/client로 모듈을 찾지 못하는데, 이전 버전 코드를 활용하면 정상적으로 모듈을 찾을 수 있습니다. 해당 내용을 다음과 같이 고쳐줍니다. (그냥 /client만 빼면 됩니다.)
import ReactDOM from 'react-dom';
이제 문제가 없을까요? 컴파일이 문제없이 진행되었으므로 한번 다시 실행해 봅시다.
이번에는 실행은 되지만 뭔가 화면이 제대로 나오지 않고 있습니다.
2. createRoot 문제 해결
콘솔을 열어보니 다음과 같이 또 오류가 발생한 것을 확인할 수 있습니다.
createRoot is not a fuction이라며 콘솔에서 문제를 보고하고 있는데요, 해당 내용을 또 수정해주어야 합니다.
기존 코드는 다음과 같이 ReactDOM의 createRoot 함수를 통해 root 객체를 만들어주고, 해당 객체를 render하는 방식으로 되어 있었습니다. 하지만 이건 리액트 18.0 버전에서 사용하는 방식이고, 하위 버전에서는 동작하지 않습니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
따라서 다음과 같이 코드를 수정해주어야 합니다. ReactDOM이 직접 render하는 구조이며 document.getElementById('root')는 render의 파라미터로 전달되었습니다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
이제 다시 실행해보면 잘 동작하는 것을 확인할 수 있습니다. 콘솔 오류도 없이 깨끗한 상태입니다.
리액트 버전 낮추는 방법에 관해 알아봤습니다. 한글 자료가 많지 않고, 특히 18.0 버전 이상에서 발생하는 코드 호환성 문제를 다루는 경우가 많지 않아 직접 글을 작성해봤습니다.
여러분도 필요하시다면 자유롭게 리액트 버전을 변경하며 프로젝트 진행하시기 바랍니다.
직접 조사해서 작성하는 글이다 보니 일부 정확하지 않은 정보가 포함되어 있을 수 있습니다.
궁금한 사항이나 잘못된 내용이 있으면 댓글로 알려주세요~
구독과 좋아요, 환영합니다!
'웹 > React' 카테고리의 다른 글
| [React] 리액트 브라우저 자동실행 방지 (BROWSER=none 환경변수 설정, cross-env 설치) (0) | 2023.04.16 |
|---|