의미
- React에 있는 가상의 DOM 객체
- 실제 DOM의 사본 같은 개념
UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념
Virtual DOM과 Internals
탄생 배경
DOM(Document Object Model)
- 브라우저가 트리 구조로 만든 객체 모델
- JavaScript와 같은 스크립팅 언어가
<html>,<head>,<body>와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것
🌲 Tree 구조
“데이터 저장"의 의미보다는 “저장된 데이터를 더 효과적으로 탐색”하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조
DOM의 문제점
- 비효율적인 업데이트로 업데이트 속도가 느림
- 변경이 필요한 요소만 업데이트하는 것이 아니라 전체 요소를 새로 업데이트하기 때문
- JavaScript로 조작하는 DOM의 요소가 많을수록 모든 DOM 업데이트에 대하여 리플로우를 해야 하므로 DOM의 업데이트에 대한 비용이 많이 듦
업데이트 과정
- 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 일어남
- 이를 위해 브라우저의 렌더링 엔진 또한 리플로우(Reflow)함
- 즉, 업데이트 된 요소와 그에 해당하는 자식 요소들에 의해 DOM 트리를 재구축함으로써 재랜더링 과정을 거쳐 UI를 업데이트함
- 브라우저의 리플로우와 리페인트 과정을 위한 재연산을 해야 하기 때문에 속도가 그만큼 느려짐
Virtual DOM을 통한 해결 방법
- React는 실제 DOM 객체에 접근하여 조작하는 대신 Virtual DOM에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용함
작동 원리
(출처: What is the virtual DOM in React?)
-
가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 ReactDOM과 같은 라이브러리를 통해 실제 DOM과 동기화시킴
- 새로운 요소가 UI에 추가되면 React가 트리 구조로 표현이 되는 Virtual DOM을 만듦
- 요소의 상태가 변경이 되면 다시 새로운 Virtual DOM 트리를 만듦
- 이전의 Virtual DOM과 이후의 Virtual DOM의 차이를 비교함
- 비교가 끝나면 Virtual DOM이 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산함
- 트리가 업데이트된 UI를 제공하기 위해 부분적으로 리렌더링됨
- 업데이트된 트리는 실제 DOM으로 한꺼번에 업데이트됨
형태
추상화된 자바스크립트 객체 형태
const vDom = {
tagName: "html",
children: [
{ tagName: "head" },
{ tagName: "body",
children: [
tagName: "ul",
attributes: { "class": "list"},
children: [
{
tagName: "li",
attributes: { "class": "list_item" },
textContent: "List item"
}
]
]
}
]
}특징
- 실제 DOM을 조작하면 실제로 브라우저 화면에 그리기 때문에 느리지만, 가상 DOM을 조작하는 것은 실제 DOM처럼 실제로 브라우저 화면에 그리는 것이 아니기 때문에 훨씬 속도가 빠름
- 실제 DOM과 마찬가지로 가상 DOM 또한 HTML 문서 객체를 기반으로 함
- 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작할 수 있음
