Virtual Dom이란?
Virtual Dom(VDOM)은 UI의 표현을 메모리에 저장하고 DOM과 동기화하는 프로그래밍 개념을 말합니다.
이러한 개념을 사용해서 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
VDOM을 사용하는 이유
DOM에 변화가 생기면 브라우저는 렌더링(Critical Rendering Path)과정을 거치게 됩니다.
이러한 변화가 자주 반복적이라면 그만큼 렌더링 과정이 일어나서 성능이 저하됩니다.
상태가 변화가 일어나면 먼저 VDOM에서 연산을 하고 달라진 부분만 DOM에 전달합니다.
모든 변화를 한번에 묶어서 전달하기에 렌더링 규모가 커졌지만 딱 한 번만 렌더링 과정을 거치게 됩니다.
하지만 한 번에 렌더링하기 위해서만 VDOM을 쓰는 것은 아닙니다.
DOM fragment를 사용해서 한번에 렌더링을 처리 할 수 있지만 변화를 계속 추적하고 상태 공유를 감시하면서 그에 따른 동기화 작업해야하는데 VDOM이 이 과정을 자동화하고 추상화하는 것입니다.
VDOM 만들기
VDOM은 위와 같은 순수 자바스크립트 객체입니다.
이런 VDOM을 일일이 트리로 만드는 어렵기 때문에 createElement라는 헬퍼 함수를 작성합니다.
기존의 작성했던 vNode를 createElement 함수로 바꿉니다.
VDOM을 DOM 요소로 변환하는 render 함수를 작성합니다.
DOM 요소를 실제 웹페이지에 적용하는 mount 함수를 작성합니다.
이로서 간단하게 VDOM이 어떤 로직을 가지고 있는지 살펴보았습니다.
