Virtual DOM의 개념

DOM이란?

DOM(Document object model)은 해석하자면 문서 객체 모델이다.
XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. 그래 DOM은 인터페이스이다.
웹페이지를 구성하는 HTML Elements들과 상응하는 node가 Tree 형태로 구조가 만들어졌다. 이것을 DOM Tree라고 한다.
W3C의 표준화한 API들의 기반이 된다. DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다.

DOM의 특징

• DOM은 브라우저에 내장되어 있다.
• 따라서 html의 내용을 javascript로 접근, 제어 할수있다.
• DOM은 API를 가지고 있다. (이걸로 변경)
• 모든 요소는 node로부터 상속 받는다.
• 요소 = node다 라고 이해
• DOM은 노드로 만들어 진다.

DOM 조작

DOM이 제공하는 API를 통해 원하는 DOM 구조에 접근하고, 원하는 Elements를 원하는 구조, 스타일을 변경하는 행위를 돔 조작이라 한다. 쉽게 말해 요소의 스타일 등 변경하는 행위.

DOM 조작 과정 :

돔 탐색 -> 변경 Elements 삭제,변경 -> css 다시계산 -> 레이아웃 수정 -> 브라우저에 다시 그리기

Virtual DOM이란?

실제 DOM의 내용을 가진 복사본.
실제 돔과는 다르게 브라우저의 문서에 직접 접근할 수 없다.

Virtual DOM은 왜 생겼나?

'Virtual DOM' 이하 '가상돔'은 DOM 조작 시 매번 새롭게 UI를 그리는 작업이 무겁지는 않지만 복잡하고 시간이 걸리기 때문에 가상돔에 그린 후 한꺼번에 DOM에 적용하려고 생겨남.

Virtual DOM은 어떻게 동작하나?

가상돔 2개를 준비해 before/after마냥 이전 버전/변경 버전을 비교해(이걸 Diffing이라 함) 변경된 요소만 실제 DOM에 적용한다.(이게 Reconciliation 임)
장점은 DOM처럼 3개 요소를 변경시키면 3번 바뀌는게 아니고, 3개 변경된걸 한꺼번에(집단 변경) 변경시킨다. (이걸 Batch Update 라고 함)

한 줄 요약

• DOM = 요소를 변경하도록 돕는 인터페이스
• Vrtual DOM = DOM 복사본
• Virtual DOM은 어떻게 동작?
  :2개의 가상돔 중 하나만 변경 내용을 저장해 둘을 비교(Diffing) -> 변경된 부분만 실제 DOM에 적용(Reconciliation) => 이를 효율적으로 집단 변경하는 방법은 Batch Update