React

React의 특징

• 선언형 프로그래밍
• 컴포넌트 시스템
• 멀티 플랫폼 지원

프로그래밍 패러다임

• 명령형
  • DOM, jQuery
• 선언형
  • React

DOM : Document Object Model

HTML 요소들의 구조화된 표현

여러 프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API 제공.

DOM은 브라우저에서 보이는 것이 아니다. 브라우저에 보이는 건 렌더 트리.

개발도구에서도 안보임.

웹 어떻게 만들어지는가?

웹 브라우저가 원본 HTML 읽어들임. 스타일 입히고 대화형 페이지로 만들어서 뷰 포트에 표시→Critical Rendering Path

CRP의 단계

1)브라우저가 문서 파싱 후, 렌더링 할 페이지 결정

→렌더 트리 생성됨

렌더 트리 : DOM과 CSSOM을 합한 후 브라우저에 표기될 노드들만 선별되어 생성된 트리

CSSOM (Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

2)브라우저가 해당 렌더링 수행

DOM 예시

HTML 코드

Hello, world!

DOM 트리

html

head

body

Hello,world!

컴포넌트 시스템

컴포넌트

유저가 사용하는 시스템에 대한 조작 장치

컨트롤이나 UI라고도 한다.

ex) Button, Form element

왜 사용하는가?

UI를 모듈 식으로 세분화하여 규모가 큰 UI를 깨지지 않고, 디버깅이 쉽고, 적은 시간을 들여서 만들기 위해 사용

컴포넌트 주도 설계(ComponentDrivenDevelopment)

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI)를 구축하는 개발 및 설계 방법론

CDD 방식의 장점

1. 품질
   1. 다양한 시나리오에 대해 확인 가능
2. 내구성
   1. 버그 세부 사항 알 수 있음
3. 속도
   1. 컴포넌트 재사용하여 빠르게 조립 가능
4. 효율성
   1. 개별 컴포넌트로 분리하여 개발 및 디자인 병렬 처리