DOM?

앞서 잠깐 등장했던 DOM

리액트 프레임워크 구성의 기본 3요소 : 가상 DOM, JSX 구문, 컴포넌트

mindmap
	root((React))
		id)virtual DOM(
		id)JavaScript XML(
		id)component(

• 새로운 프로젝트 시작하기 02

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

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

$ npm i chance luxon
$ npm i -D @types/chance @types/luxon
$ npm start

리액트 패키지 구조 ⭐

flowchart TD
	A[react] --> B[가상 DOM]
	B --> C[react-dom/client]
	B --> D[react-dom/server]
	B --> E[react-native]

• 리액트 프로젝트는 react와 react-dom 패키지가 필요함

  • react → 앱 동작 환경과 무관한 공통으로 사용하는 기능 제공
  • react-dom 렌더러renderer → 앱 동작 환경(플랫폼)에 종속적인 기능 제공 특화

• 대상 앱에 특화된 렌더링 기능

  [ react-dom/client ]

  • CSR(client-side rendering) 방식 웹 앱

  [ react-dom/server ]

  • SSR(server-side rendering) 방식 웹 앱

  [ react-native ]

  • 모바일 앱 (아이폰, 안드로이드)

<aside> ✅ react와 renderer 패키지 경계에는 가상 DOM이라는 메커니즘이 위치

</aside>

XML 마크업 언어

사람들에게 쉬운 작성을 제공하며, 컴퓨터도 의미가 쉽게 파악 가능한 특수한 형식의 텍스트

<Person name="redzzzi" age="4"/>