virtual Dom이란?

virtual DOM에 대해 알기 위해선 기본적으로 브라우저 랜더링 과정과 DOM에 생성원리부터 알아야 한다.

브라우저 랜더링 과정을 큰 틀로 나뉘면
1. DOM tree 생성
2. Render tree 생성
3. Layout 과정 실행
4. Paint 과정 실행
이렇게 4개의 과정으로 진행이 된다라고 보면 된다.

1. Dom tree 생성

Dom 트리는 HTML 파서에서부터 브라우저 엔진이 DOM node 트리를 만든다.

2. Render tree생성

HTML을 기준으로 DOM tree를 생성하면, CSS와 Alignment를 파싱하여 style 정보를 기준으로 랜더트리를 생성한다.

3. Layout 과정 실행

이 과정에서 각 컴포넌트는 좌표가 주어지고, 정확히 어느곳에 위치하게 될지 위치를 항당받는다.

4. Paint

앞선 과정에서 얻을 수 있는 요소들로, 모든 요소에 색을 칠하는 과정이다.

이런과정을 거치면 화면에 UI가 render된다. 이때 DOM요소중 어떤 요소를 인위적으로 변경하거나 업데이트를 할 경우, 앞선 1,2,3,4 과정을 모두 다시 실행하게되고, 이럴때 꽤 많은 리소스가 들어간다.

virtual Dom이란?

예전에는 서버에서 데이터와 함께 완전한 페이지를 렌더해주는 SSR, 서버 사이드 랜더링 방법을 통해 정적인 웹페이지를 보여주는 사이트가 대부분이였다. 따라서 DOM에 동적인 변화가 크게 문제가 되지 않았다. 하지만 CSR (Client side rendering 대표적으로는 react)의 등장과 함께 이 방식이 많이 사용되면서 DOM 업데이트가 상당히 많이 발생하는 어플리케이션이 많아졌다.

이러한 잦은 DOM update의 비효율성을 개선하기 위해 나온게 virtual DOM이다.
쉽게 말해 Virtual DOM은 regular DOM에 가벼운 버전이다. 실제 DOM 노드 트리를 복제한 자바스크립트 객체이다. virtual DOM은 class, style등의 속성값은 갖고 있지만, 화면의 변화를 실제로 줄 수 있는 getElementById같은 DOM api 메서드는 갖고 있지 않다

virtual DOM의 작동방식

브라우저가 regular DOM을 랜더할때 virtual Dom은 레귤러의 가벼운 버전으로 복사를 한다.
이후에 DOM node에 변화가 생기면 virtual DOM은 새로운 가상의 트리를 만들게 되는데, 이때 변화가 생길때마다 virtual DOM을 새로 생성하는데, Dom tree를 업데이트 할때 리소스가 많이 드는게 아니라 Render할때 리소스가 많이 드는것이다. virtual DOM은 메모리상에서 tree를 변경하는 일이기 때문에 상대적으로 리소스가 적게들고 빠르게 처리를 할 수 있다.

virtual DOM에 내부 구현체를 살펴보면,
diff(previous:Vtree, current:Vtree) -> pathchObject
즉 이전상태의 돔트리와 새로 만들어진 돔 트리를 비교해서 변화된 부분만을 확인하게 되고, 실제 돔에 변경된 부분만을 변경한다.

이 일련의 과정을 봤을때, virtual DOM은 버퍼링이나 캐싱의 역할을 할 수 있다고 볼 수 있다. --> 한번만 렌더링 되기 때문.