DOM이란?
Document Object Model
웹 페이지를 구성하는 요소를 구조화 해서 나타낸 객체.
이 객체를 이용해 웹 페이지 구성 요소를 제어 할 수 있다.
📄 웹 페이지를 구성하는 요소는 문서(Document) : html 파일
🌲 구조화 : 노드를 트리 형태의 계층적 구조로 만들어 메모리에 적재.
⚪️ 웹 페이지 구성요소를 구조화 해 나타낸 -> 객체(Object)
🟡 이 객체를 이용해 웹 페이지 구성 요소를 제어 할 수 있다.
즉, html(xml) 문서에 접근하기 위한 인터페이스
Critical Rendering Path
브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 픽셀을 그리기 전에 수행해야 할 많은 단계들 : critical rendering path
html 문서 로드 → 파싱 → 태그들을 DOM 노드로 변환
→ CSS 같은 스타일 요소 파싱 → DOM, CSSOM 결합해 렌더 트리 구성 → 렌더 트리 배치(layout) → 렌더 그리기(paint단계)
이를 대략적으로 두 단계로 나누면
1. 로드 한 문서를 파싱해 어떤 내용을 페이지에 렌더링 할 지 결정
2. 렌더링 수행
첫번째 단계에서 렌더 트리가 만들어지게 되는데, 렌더 트리란 페이지에 표시될 html 요소와 스타일 요소들로 구성되게 된다.
브라우저는 DOM과 CSSOM을 결합해 렌더 트리를 생성한다.
DOM은 위에서 말했다싶이 html 요소들을 노드 트리로 구조화한 인터페이스이며,
CSSOM은 Cascading Style Sheets Object Model의 약어로 스타일 정보의 구조화 된 표현이다.
DOM(Document Object Model)
: HTML 요소들의 구조화된 표현
CSSOM(Cascading Style Sheets Object Model)
: 요소들과 연관된 스타일 정보의 구조화된 표현
브라우저에서 DOM에 변화가 일어나면 브라우저는 CSS를 다시 연산하고, 레이아웃을 연산하고, 구성하고, 페이지를 리페인트 한다. 이 과정에서 반복되는 불필요하고 비효율적인 연산 등의 문제 해결을 위해 virtual DOM 방식이 등장하게 되었다.
virtual DOM
리액트에서 뷰를 업데이트 할 때, 조화 과정(reconciliation)을 거친다 라고 하는데 컴포넌트의 변화에 따라 뷰가 변형되는 것이 아니라 요소를 갈아 끼운다는 뜻이다.
이 때 render 함수가 반환하는 결과를 DOM에 바로 반영하지 않고 이전 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다. 자바스크립트를 사용해 두 가지 뷰를 최소한의 연산으로 비교한 후 둘의 차이를 최소한의 연산으로 DOM 트리를 업데이트 한다.
DOM을 추상화 한 객체를 구성해 최적의 자원을 사용해 업데이트
리액트에서의 DOM 업데이트 과정
1. 전체 UI를 virtual DOM에 리렌더링
2. 이전 virtual DOM의 상태와 현재 상태를 비교
3. 바뀐 부분만 실제 DOM에 적용
하지만 virtual DOM을 사용한다고 해서 무조건 빠른 것은 아니다.
매우 간단한 작업(정적 페이지)은 오히려 이를 이용하지 않는 편이 더 나은 성능을 보이기도 한다.
참고
https://wit.nts-corp.com/2019/02/14/5522
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
http://www.tcpschool.com/javascript/js_dom_concept
리액트를 다루는 기술
