가상 돔이 필요한 이유
DOM 이란?
DOM(Document Object Model)은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것입니다.
DOM은 웹 페이지의 객체 기반 표현방식으로 HTML 및 XML 문서의 구조를 표현합니다.
이것은 문서 내의 모든 요소와 속성, 그리고 그들의 계층적 관계를 표현할 수 있게 해줍니다.
즉, 웹 문서의 구조를 트리 구조로 보고 이것을 조작하거나 접근할 수 있도록 돕는 모델입니다.
이렇게 표현된 DOM 트리 구조를 통해 자바스크립트와 같은 스크립트 언어가 동적으로 문서의 구조, 스타일 그리고 내용을 변경할 수 있게 됩니다.
DOM이란 HTML 요소들을 계층 구조 형식으로 표현한 모델
만약에 DOM에 변화가 생긴다면?
만약 웹 페이지의 DOM에 변화가 생기면, 웹 브라우저는 그 변화를 반영하기 위해 리렌더링 과정을 거치게 됩니다. 이 과정은 JavaScript를 통해 웹 페이지의 내용, 구조, 스타일 등을 동적으로 변경할 때 일어나며, 이를 통해 사용자에게 변화된 내용을 보여줍니다.
그런데 이러한 DOM의 변화와 리렌더링 과정은 성능에 영향을 미칠 수 있습니다. DOM 조작은 비용이 큰 작업으로, 이로 인한 빈번한 레이아웃 변경은 웹 페이지의 성능을 저하시킬 수 있습니다.
DOM에 변화가 생기면, 그 변화를 반영하기 위해 브라우저가 리렌더링을 수행하며, 이 과정은 때때로 비용이 많이 들 수 있습니다.
그래서 등장한 것이 Virtual DOM입니다.
Virtual DOM이란?
버츄얼 돔(Virtual DOM)은 실제 DOM을 추상화한 개념으로, 메모리 내에 가상으로 존재하는 DOM을 의미합니다. 웹 페이지의 DOM 구조를 메모리에 로드하여, 실제 DOM에 변화를 주기 전에 버츄얼 돔에서 먼저 변화를 처리하는 방식을 사용합니다.
이 방식의 장점은 실제 DOM에 직접 접근하여 변화를 주는 것보다 성능적으로 훨씬 효율적이라는 것입니다. 실제 DOM에 변화를 주는 것은 비용이 많이 들고, 렌더링을 여러 번 수행하게 되므로 성능 저하를 일으킬 수 있습니다.
하지만 버츄얼 돔을 사용하면, 웹 페이지의 상태 변화가 일어날 때마다 실제 DOM을 조작하는 대신 메모리에 존재하는 가상의 DOM을 변경합니다. 그리고 이 변경 사항을 적용하기 전에 이전 버츄얼 돔과 비교하여 실제로 변경이 필요한 부분만 찾아내 실제 DOM에 적용합니다.
이를 'Diffing'과 'Reconciliation'이라고 합니다.
