Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고,ReactDOM과 같은 라이브러리에 의해 실제DOM과 동기화하는 프로그래밍 개념
<ul class="fruits">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>다음과 같은 코드는 Virtual DOM에서 아래와 같이 표현 될 수 있다.
type: "ul",
props: {
"class": "fruits"
},
children: [
{
type: "li",
props: null,
children: [
"Apple"
]
},
{
type: "li",
props: null,
children: [
"Orange"
]
},
{
type: "li",
props: null,
children: [
"Banana"
]
}
]DOM은 브라우저들에 의해, React, Vue와 같은 프레임워크는 tree like한 실제 DOM과 흡사한 구조를 메모리에 만들며 이를 Virtual DOM이라 한다.
우선적으로 위와 같은 개념을 이해하기 위해 DOM은 무엇일까?
DOM (Document Object Model)
DOM은 문서 객체 모델로, 브라우저에서 다룰 HTML문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것 이다.
DOM은 HTML Elements, Attributes, CSS styles, Events, Methods 등을 제어할 수 잇는 표준 인터페이스를 제공한다.
즉, 웹 페이지의 구성요소를 구조화하여 객체로 나타내고, 이를 이용하여 웹 페이지의 구성요소를 제어하는 것 이다.
DOM의 개념은 Okay, 그럼 왜 Virtual DOM?
기존 페이지들은 SSR (Server-Side Rendering)으로 이루어졌고, 이에 모든 유저의 인터랙션은 모두 새로운 page를 보내주며 이루어졌다.
SPA (Single Page Application)이 등장하며, 복잡한 DOM 작업들은 모두 한 문서에서 이루어졌다. 이에 복잡한 프로젝트들은 최적화되지 않은 DOM 작업이 이루어지기도 하였다.
쉽게 예를 들자면, Array에 담긴 값들을 렌더링하고 있다 가정하고, 이때 그 값중 하나를 수정하게 된다면, 기존 방식으로는 새롭게 만든 리스트가 DOM에 업데이트되게 된다. 이러한 과정들은 DOM을 느리게 한다.
React와 같은 프레임워크는 state/props의 변화 감지를 하여, 새로운 Virtual DOM을 표현하고, 이전 것과 비교한다. 변화에 대해 DOM 전체를 바꾸는 것이 아닌, 변화된 부분만 바꿀 수 있도록 DOM을 업데이트 한다.
그럼 가상 DOM은 빠른가보다...
절대 그렇지 않다. Virtual DOM은 렌더링을 하기 위해 DOM 또한 사용하기 때문이다. 그럼 왜 빠르다고 하냐?!
빠른 것이 아니다. 앞선 바와 같이 변화를 비교하여, 전체가 아닌 일부를 업데이트 시킬 수 있기 때문이다.
결국 Virtual DOM의 Cost는 다른 Virtual DOM과의 차이점을 계산하는 것이다.
참고 Article: What is Virtual Dom? And Why is it faster? Karthik Raja
Posted on 2020년 5월 16일
