Virtual DOM이란?
이해를 위해서 우선 DOM이 뭔지를 알고 있어야 한다.
DOM(Document Object Model)
DOM은 문서 객체 모델이라고 부른다. 브라우저에서 화면에 표시할 HTML문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것이다.
즉 DOM은 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체이고, 이 객체를 이용해서 웹 페이지 구성요소를 제어할 수 있다고 할 수 있다.
Virtual DOM은 왜 등장했는가?
- DOM 조작에 의한 랜더링이 비효율적인 문제를 야기했기 때문이다.
- DOM 복잡도 증가에 따른 최적화 및 유지 보수가 어려운 문제 떄문이다.
즉, DOM을 반복적으로 직접 조작하면, 그만큼 브라우저가 랜더링을 자주하게 되고, 그만큼 자원을 많이 소모하게 되는 문제를 해결하고자 하는 것이다.
웹 브라우저는 HTML을 파싱하여 DOM객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만들어, 두개를 합쳐 실제로 웹 브라우저에 보여져야할 요소들을 표현할 규칙이나 순서를 의미하는 '랜더 트리'라는 것을 만든다.
화면 상에서 변경할 부분이 생기면 DOM구조에 의하면, 변경이 발생한 횟수만큼 DOM구조를 변경하고 랜더링을 반복해온 것이다.
Virtual DOM은 이 문제를 어떻게 해결했는가?
이를 해결하기 위해 Virtaul DOM이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓았다. 즉 변경 사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtaul DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 했다.
Virtual DOM의 변경 내역을 한번에 모으고, 실제 DOM과 변경된 차이를 판단한 후 변경된 부분만 찾아서 변경하고 최종적으로 랜더링하는 방식을 채택한 것이다.
가령 10개의 <li>태그의 구성이 바뀌게 되면 DOM에 10번 조작을 가하고 10번 리랜더링을 한 것이 아니라, 10개의 태그의 변경사항을 한번에 파악한 후에 랜더링을 한 것이다.
