React 버전 확인 방법

Question

설치

Node.js란?

Chorme V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.
노드 환경에서 자바스크립트 혹은 타입스크립트로 돌아가는 서버 또는 CLI 프로그램 등을 만들 수 있다.

Node.js 설치

Node.js 공식사이트

목차 Show

Node.js란?
React설치
심플 웹앱 실행
디렉토리 구조 파악
사용이유
리액트의 특징

NPM이란?

Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
yarn도 같은 역할을 한다.
노드를 설치하면 같이 설치된다.

React설치

npm을 이용한 방법
npm install -g create-react-app 입력 -> 설치
create-react-app -V 입력 -> 버전 확인 (설치 확인)

npx를 이용한 방법 (권장)
npx create-react-app

npm과 npx의 차이
npm은 설치하는 프로그램이고, npx는 임시로 설치해서 실행 후 지워지는 프로그램이다.

심플 웹앱 실행

터미널에서 npm start 입력 (VS 코드 사용)
ctrl + c : 실행 종료

디렉토리 구조 파악

JS
public : index.html
react실행 시 나오는 첫 화면
컴포넌트가 <div id="root"></div> 태그 안으로 들어간다.
src : index.js
document.getElementById('root')를 통하여 index.html에 진입
<App /> : 리액트를 통해 만든 사용자 정의 태그 (컴포넌트)
import App from './App' : App 컴포넌트를 불러온다 (App.js)
src : App.js
App 컴포넌트로 실제 구현한 파일

CSS
import './App.css' : CSS파일 불러오기

배포

터미널에 npm run build 입력 -> 디렉토리에 build 파일 생성
공백과 같은 불필요한 내용이 없어진다. -> 용량이 줄어든다.

사용이유

리액트의 특징

1. `JSX`

JSX는 javascript + xml로 자바스크립트의 확장 구문이다.
이 문법은 Element(요소)를 리액트에서 제공해주기에 마크업 코드처럼 작성 할 수 있다.
import React from 'react';
const HelloWorld = () => {
  return <div>Hello World!</div>;
}
export default HelloWorld;
이런식으로 HTML 태그처럼 적을 수 있기에 굉장히 편하다.

2. `Component`

컴포넌트는 UI를 구성하는 개별적인 뷰의 단위이다.
컴포넌트의 특징은 재사용성이다.

리액트의 장점

리액트는 Virtual DOM을 이용한다.
기존의 View를 계속 바꾸는 형식으로 사용할 경우 성능 저하를 일으키기에 Virtual DOM을 이용하여 먼저 가상의 돔에서 새롭게 렌더링하여 기존의 View에 돔과 비교하여 바뀐 부분만 적용하는 방식이다.
Component를 이용한 효율적 재사용과 유지보수에 용이하다.
Component는 UI(User Interface)를 구성하는 뷰의 단위로 전체 앱은 Component들이 모여서 만들어 지게 된다. 이렇게 각 UI마다의 단위이기에 다른 앱에서도 쉽게 재사용을 할 수 있다.
React는 JSX문법을 이용한다.
JSX문법을 HTML과 같은 마크업 언어의 형태를 띄고 있기 때문에 비교적 쉽게 공부할 수 있는 부분도 있다.

리액트의 단점

리액트는 View Only이다.
결국 View만을 만들 수 있기에 데이터 관련 처리나 Routing 같은 경우는 또 다른 라이브러리를 이용해야하는 불편함이 있다.
IE8 이하에서는 지원을 하지 않는다.
2022년 6월 부터는 MS에서 IE에 지원을 종료하겠다고 하여 이 단점은 곧 없어질 예정이다.

npx create-react-app 으로 리액트 프로젝트를 세팅하면,

항상 최신 버전의 react, react-dom 으로 설치가 된다.

그러나 다른 라이브러리와 호환이 안되는 등의 이슈로 인해,

react의 버전을 변경해야 할 때가 있다.

혹은,

GitHub 레퍼지터리 등에서 clone/pull 해온 프로젝트에서

npm install || yarn install 을 실행하면 버전이 서로 안 맞는다는 식의 에러코드가 쏟아질 때가 있다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: 
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project

npm ERR! Could not resolve dependency:
npm ERR! Conflicting peer dependency: 
npm ERR! Conflicting peer dependency: 

npm ERR!   peer react@"^16.8 || ^17.0 || ^18.0"
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.2.0" from the root project

could not resolve dependency: npm peer react@"^18.0.0" from @testing-library/

새로 프로젝트를 세팅하든,

레퍼지터리에서 불러와서 세팅하든,

방법은 아래의 3단계로 진행 한다.

1. 일단 create-react-app으로 React 프로젝트 세팅

- 혹은 GitHub, GitLab에서 기존 프로젝트를 clone/pull 해온다.

npx create-react-app 폴더명

- npx create-react-app 은 최신버전의 react, react-dom 으로 세팅되므로, 아래에서 변경할 예정이다.

- git clone 해온 경우, package.json 에서 모듈간에 버전이 서로 안 맞을 수 있으므로, 아래에서 맞춰줄 예정이다.

2. 라이브러리 모듈 삭제 (없으면 패스)

- package-lock.json 파일 삭제

- node_modules 폴더 삭제

3. package.json 파일 수정

- react, react-dom 의 버전을 변경해준다.

- 중요!!!! React 18 미만의 버전은 test 라이브러리 버전도 낮춰주야 한다.

=> 예를 들어 React 17 버전의 경우, testing-library 13 버전은 호환되지 않으므로 12 버전으로 변경해주면 된다.

{
// ...
"dependencies": {
	// ...
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^12.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    // ...
  }
  // ...
 }

=> react, react-dom 버전만 변경하고, testing-library를 안 맞춰주면 아래의 에러가 노출되면서 설치가 안 될 수 있다.

could not resolve dependency: npm peer react@"^18.0.0" from @testing-library/