Create react app version 확인 방법

Create React App은 React 배우기에 간편한 환경이며, 시작하기에 최고의 방법은 새로운 싱글 페이지 애플리케이션 입니다. 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다. 

1. Node.js 설치 및 npx 설치

가장 먼저 Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 설치 후 콘솔창에 node js의 버전을 확인해보는 명령어는 다음과 같다. 

node -v

그 후 npx 가 설치되어있는지 버전이나 커맨드 실행을 확인해본다.

npm install npx -g // npx 설치

npx -v // 버전확인
npx // npx 커맨드 실행

2. 새로운 프로젝트 만들기 (create-react-app)

create-react-app 설치

cmd 창에 아래명령어로 create-react-app 을 설치한다.

npm install -g create-react-app

만약 위 명령어를 입력하고 에러가 뜬다면 아래 명령어를 입력한다.

sudo npm install create-react-app

create-react-app 설치 확인

아래 명령어를 입력해서 앱이 잘 설치되었는지 확인

create-react-app -V

폴더에 개발환경 만들기

개발환경으로 만들고 싶은 폴더를 만들고 그 폴더 안에서 cmd 창을 열거나 그 위치로 이동한다.

cd 파일경로

새로운 프로젝트를 만들기 위해 아래의 명령어를 실행한다. my-app에는 내가 만들 프로젝트 이름을 넣는다.

npx create-react-app .
npm start

설치 완료 후 폴더 안에 node_modules, package.json 등등의 파일들이 생긴다.

3. app 실행

앱이 만들어지길 기다리다가 끝난다면 vs code에서 app을 열어본다.

code my-app

pakage.json 파일에서 다음과 같이 실행시킬 수 있는 script를 확인해볼 수 있다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

새 터미널을 열고, app 실행을 위해 start 스크립트를 실행시킨다.

npm start // npm run start

이는 개발용 서버를 만들게 되며, 자동으로 브라우저가 열리고, 초기 버전이 출력됨을 확인할 수 있다.

그 외

• src 폴더 : 내 모든 소스 파일을 넣을 폴더
• index.js , index.html : src에 있는 코드들을 자동으로 index.html(root id의 div태그) 페이지에 넣도록 자동으로 설정되어있다.

create-react-app의 장점 중 한가지는 자동재실행(auto-reload)으로, 우리가 코드를 수정한 뒤 페이지로 가서 새로고침을 한다면 바로 적용된 것을 볼 수 있다.

깔끔하게 시작하고 싶다면 리액트 어플리케이션을 랜더링해줄뿐인 index.js와 출력할 화면의.. app.js 파일정도만 남기고 정리하면 된다.

+

참고

새로운 React 앱 만들기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

오늘은 리액트 버전 낮추는 방법에 관해 알아보겠습니다. 진행하며 발생할 수 있는 오류까지 자세히 살펴볼 예정입니다.

종속성 문제 때문에 최신 버전이 아닌 리액트를 사용해야 하는 경우가 종종 있는데, 저도 그런 상황이어서 직접 공부한 내용을 포스팅하게 되었습니다.

리액트 버전 낮추기(변경/다운그레이드)

일반적으로 다음과 같이 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 버전 이상에서 발생하는 코드 호환성 문제를 다루는 경우가 많지 않아 직접 글을 작성해봤습니다.

여러분도 필요하시다면 자유롭게 리액트 버전을 변경하며 프로젝트 진행하시기 바랍니다.

직접 조사해서 작성하는 글이다 보니 일부 정확하지 않은 정보가 포함되어 있을 수 있습니다.

궁금한 사항이나 잘못된 내용이 있으면 댓글로 알려주세요~

구독과 좋아요, 환영합니다!