돔.... 가상돔....CSSOM... 돔 조작.....
자주 많이 들었는데 너무 어렴풋하게 아는 거 같아 정리하면서 공부해보자

DOM

문서 객체 모델(Document Object Model)

HTML, XML 문서의 프로그래밍 interface

문서의 구조화된 표현을 제공, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

nodes와 objects로 문서를 표현

웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용될 수 있게 연결시켜주는 역할

웹 페이지의 객체 지향 표현이며 자바스크립트와 같은 스크립팅 언어를 통해 DOM을 수정할 수 있다.

DOM의 핵심 Interfaces

window object는 브라우저와 같다고 할 수 있으며

document object 는 root document 자체라고 할 수 있다.

Virtual DOM

UI의 이상적인 또는 "가상"적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
= 재조정

DOM에 변화가 생기면 렌더트리를 재생성하고 레이아웃을 다시 만들고 페인팅을 하는 과정이 반복된다

복잡한 SPA에서는 DOM 조작이 많이 발생 -> 비효율적

1. 변화가 일어나면 오프라인 DOM 트리에 적용
2. 오프라인 DOM 트리는 렌더링 되지 않기 때문에 연산 비용 줄어듬
3. 연산이 끝나면 최종 변화를 실제 DOM에 전달
4. 즉 한번만 렌더링

모든 변화를 하나로 묶어서...!

---

---

참고자료
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://ko.reactjs.org/docs/faq-internals.html
https://velopert.com/3236