1. Component

리액트는 CBD(Component Based Development)를 사용한다.

CBD(Component Based Development)방법론의 정의

• 재사용 가능한 컴포넌트의 개발 또는 상용 컴포넌트들을 조합하여 어플리케이션 개발 생산성, 품질을 높이고, 시스템 유지보수 비용을 최소화 할 수 있는 혁신 개발방법론

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

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

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

내가 만든 컴포넌트는 내가 지은 이름을 가지고 내가 정한 속성을 설정해서 표현하는 하나의 구성이다.
<내가지은이름 prop={false}>내용</내가지은이름>부분은 내가 만든 컴포넌트를 사용하는 부분이고 컴포넌트를 사용하기 위해서는 내가지은이름으로 컴포넌트를 만들어줘야한다.

❗일종의 태그라고 생각하면 된다.

Component Tree => DOM Tree

컴포넌트 트리와 돔 트리의 구조는 비슷하다.

하지만 DOM은 이미 내장되어 있는 태그들을 사용하여 구성하지만
Component는 내장되어 있는 태그들을 조합하고 거기에 스타일을 주고 동작도 입혀서
문서, 스타일, 동작 을 한번에 다루는 형태를 만들어서 재활용하는 태그를 만들어 사용한다.

2. Virtual DOM

❗바뀐 부분만 찾아서 바꿔주는게 포인트!

3. CSR, SSR

3-1. CSR(Client Side Rendering)

1. html 다운로드
2. js파일 다운로드
3. 브라우저에서 로드
4. 이제 실행(여기까지 와야 user는 화면 확인 가능)

3-2. SSR(Server Side Rendering)

1. html 다운로드
2. 화면이 먼저 보이고 js 다운로드(user가 동작 불가능)
3. 브라우저에서 로드(화면은 계속 보이는 상태)
4. 실행

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

---