DOM(Document object model; 문서 객체 모델) 이란?
: Web Tag(html, head, body 등) 를 js에서 이용 가능하도록 Tree 구조화한 모델을 의미합니다.
js에서 이용 가능하다?
: Memory에 보관할 수 있다는 것을 의미합니다.
가상 DOM(Virtual Dom) 이란?
: 실제 DOM의 가벼운 사본이라고 할 수 있으며, 추상화된 js 객체를 의미합니다.
특징
- React.js에서 UI 성능을 높이기 위해 사용되고 있습니다.
- 실제 DOM과 달리 DOM API를 가지고 있지 않고 DOM Property만 가지고 있습니다.
- 기존 DOM은 요소가 변경될 때마다 각각 요소에 대해 Render Tree가 재생성되며, 이를 기반으로 Paint 작업을 수행합니다. 그러나, 가상 DOM은 여러 가지 요소가 수정된 후 단 한번, 수정 대상만을 새롭게 렌더링하도록 동작합니다.
; Model, View, Controller 3가지 구성 요소로 이루어진 디자인 패턴입니다.
장점
각각의 구성 요소에만 집중해서 개발 가능합니다.
단점
애플리케이션 복잡해질수록 Model, View 관계가 복잡해집니다.
Model
- Database, 상수, 변수 등 Data
- View에서 Data 생성 및 수정 → Controller 통해 Model 생성 및 갱신
View
- 사용자 인터페이스(사용자가 볼 수 있는 화면)
- Model의 정보 따로 저장 X. 화면에 표시하는 정보만 가지도록 구성
- 변경 발생 시 Controller에 전달
Controller
- 하나 이상 Model과 View를 잇는 다리 역할
- 이벤트 등 Main Logic
- Model, View의 생명주기 관리
- Model, View의 변경 통지 시, 해석해 각각에 Inform
대표적인 라이브러리
React.js - UI 구축 라이브러리
특징
- 가상 DOM(Virtual DOM)을 통해 실제 DOM을 조작해 성능을 높였습니다.
- 불변성
ex)
state : setState로만 수정 가능
pureComponent : props(=properties) 기반으로 만들어지는 컴포넌트
- 단방향 바인딩
- 자유도 높음
- 메타(facebook)가 운영. netflix, twitter, dropbox, uber, paypal, ms 등에서 사용