React 7. 리액트 동작 원리 - 가상 DOM

이제 우리는 리액트 동작 원리를 이해해야 한다.

리액트 프레임워크를 구성하는 기본 3요소는 가상 DOM, JSX 구문, 컴포넌트이다.

가장 처음으로 가상 DOM에 관하여 알아보도록 하겠다.

 

가상 DOM에 관하여 알아보기 위하여 프로젝트를 새로 하나 만들어주겠다.

가장 최상위 디렉토리인 rcp 바로 아래에 ch02 폴더를 생성해준다.

그리고 ch02 폴더 안에 ch02_1라는 이름의 리액트 프로젝트를 만들어준다.

 

mkdir ch02
cd ch02
npx create-react-app ch02_1 --template typescript

 

그리고 저번 프로젝트에서 설정해뒀던 .prettierrc.js 파일과 만들어둔 가짜 데이터들을 가져올 것이다

하나하나 다시 타이핑을 치는 것은 너무 비생산적이다...

 

cp -r ../../ch01/ch01_5/src/data ./src
cp -r ../../ch01/ch01_5/.* .

 

나도 이 명령어들은 이번에 처음 알았다.

 

rcp : 파일 또는 디렉토리를 복사하는 명령어이다.

-r : 디렉토리를 재귀적으로 복사하는 옵션이다. 즉, 디렉토리 내부의 모든 파일과 하위 디렉토리까지 복사한다.

.* : ch01_5 디렉토리 내부의 모든 숨김 파일(파일명 앞에 .이 붙는 파일)을 선택하는 것을 의미한다.

맨 뒤에 있는 ./src와 . : 현재 작업하는 디렉토리이다. 그러니까 ch02_1 디렉토리를 의미한다.

여기로 복사한 것들을 가져온다.

 

,다 복사를 했다면 이번에도 동일하게 luxon, chance 패키지를 설치해준다.

기억하겠지만 npm 프로그램으로 설치해야 한다.(npx만 아니면 된다)

 

 

 

// index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))