[TIL] 20220604 리액트 프로젝트 세팅(CRA 사용 x), 가상 DOM

CRA 없이 리액트 프로젝트 세팅하기 

terminal( 저는  bash 임 ) 에서 현재 경로에 폴더 만드는 명령어 : mkdir

mkdir myfolder

 폴더가 생성됐으면 해당 경로로 이동하는 명령어: cd 파일 혹은 폴더명

-> 여기서 폴더명을 전부 쓸 필요없이 앞쪽만 쓰고 Tap 키를 누르면 아래와 같이 매칭되는 폴더명이 자동완성된다. 

cd myfolder/

myfolder 내부에 폴더 2개(src, public)를 동시에 만드는 커맨드 

mkdir -p src public

리액트 프로젝트를 만들어줬으니 초기화해준다. 

• 초기화 명령어

yarn init -y

-> 이렇게 해주면 package.json 파일이 생기는데 우리가 CRA를 통해서 리액트 프로젝트를 만들고 yarn start 커맨드를 통해 프로젝트를 시작했던 것을 기억해보자. 이 때 start같은 명령어들이 package.json에 들어간다. 

package.json은 프로젝트 정보를 정의하고 의존하는 패키지 버전들을 명시해주는 파일이다.  + 명령어
파일 위치는 해당 프로젝트(e.g. myfolder의 바로아래)의 바로 아래에 있어야 한다.

 

웹팩을 깔아줍니다. (webpack 과  webpack-cli 두 가지) 

yarn add -D webpack webpack-cli

여기서 D는 devDependencies 의 약자로 개발환경에서만 사용하는 의존성 패키지들을 -D로 표현한다.

-> 패키지 다운로드가 완료되면 package.json 파일에 아래와 같은 내용이 추가된다.

"devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2"
  }

이 다음 명령어도 추가해줍니다. 명령어는 package.json 파일에서 아래처럼 추가해주면 된다. 

"scripts": {
    "build": "webpack --mode production"
  },

 

---- 이 뒤에 설정이 너무 많아서 생략하겠음.. 

우선 여기서 배울 수 있던 것은 기본적인 react 프로젝트의 구조 어떤 것들을 설치, 설정해야 하고 package.json의 중요성..등등을 배웠다. 기본적으로 리액트 프로젝트를 진행할 때에는 CRA를 통해서 해야한다. 왜냐면 위와 같은 과정이 너무 번거롭기 때문! 하지만 내가 직접 커스텀하면서 리액트 프로젝트를 만드는 것이 필요할 때가 있다. 참고로 react도 버전에 따라서 문법이 달라진다. 현 시점 내 리액트 version은 18인데 ver 17과 비교하면 아래와 같다.

// react v18 (리액트 버전마다 작성법이 다름)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<div>안녕 여러분 !</div>);

//react v17
// ReactDOM.render(<div>안녕 하이하이</div>, document.getElementById("root"));

가상돔 (Virtual DOM)

가상 DOM은 실제 DOM이 있으면 DOM을 똑같이 카피해놓은 것 -> 이 카피한 것을 메모리 안에다가 넣어 놓는다. 

(메모리에 있으면 실제로 렌더링되는 것이 아니다. -> 당연히 실제 DOM보다 연산 비용이 줄어든다.)

 

리액트는 가상 DOM에 변경 사항을 넣어두고 실제 DOM에 변경된 것만 한방에 반영한다.