Angular	React	Vue
크로스 플랫폼 (어떤 플랫폼에서든지 하나의 코드베이스로 결과물>	A JavaScript Library for building User Interface	The Progressive JavaScript Framework
거의 모든 기능이 프레임워크 안에 있음 (testing, animation, accessibility)
Framework	Library + Framework	Library

Component?

<!-- HTMLElement -->
<img src="이미지 주소" />
<button class="클래스 이름">버튼</button>

<!-- 내가 만든 컴포넌트 -->
<내가지은이름1 name="Mark" />
<내가지은이름 prop={false}>내용</내가지은이름>

<!-- 
	- src, class, name, props 밖에서 넣어주는 데이터
	- 문서(HTML), 스타일(CSS), 동작(JS) 를 합쳐서 내가 만든 일종의 태그	
-->

Component Tree ⇒ DOM Tree

Why Virtual DOM ?

• DOM 을 직접 제어하는 경우
  • 바뀐 부분만 정확히 바꿔야 한다.
• DOM 을 직접 제어하지 않는 경우
  • 가상의 돔 트리를 사용해서,
  • 이전 상태와 이후 상태를 비교하여,
  • 바뀐 부분을 찾아내서 자동으로 바꾼다.

Virtual DOM - diff 로 변경

State Change ⇒ Compute Diff ⇒ Re-render

React Client Side Rendering

CSR

Server Sending Response to Browser

Browser Downloads JS

Browser executes React

Page Now Viewable and Interactable

SSR

Server Sending Ready to be rendered HTML Response to Browser

Browser Renders the page, Now Viewable, and Browser Downloads JS

Browser executes React

Page Now Interactable

CSR vs SSR

• CSR
  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음
  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능
• SSR
  • JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음
  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능

---

• Node.js
  • Installer
  • nvm
• Browser(Chrome)
• Git
• VScode

---

// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';

// 2. 리액트 컴포넌트 만들기
import React from 'react';

---