virtual DOM이란?

먼저 DOM(Document Object Model)에 대한 개념부터 알아봤다.

웹을 이루는 HTML태그들을 자바스크립트가 이용할 수 있도록 웹브라우저가 트리구조로 만든 객체모델이라고 한다.

HTML/CSS <--> DOM <--> JavaScript

window라는 상위 객체가 있고 하위에 Document라는 전역 객체가 있는데, 이를 통해 자바스크립트가 HTML태그에 접근한다.

그런데 가상돔이 나오게 된 이유는?
DOM자체는 빠르다. 웹브라우저 단에서 DOM 변화가 일어나면 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리페인트, 즉 렌더링이 일어나는 과정에서 시간이 낭비된다.

※렌더링: 브라우저 로딩 과정중 스타일 이후의 과정(스타일 > 레이아웃 > 페인트 > 합성

Virtual DOM, 가상돔을 사용하면 실제DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성해서 사용한다. Real DOM의 가벼운 사본인 것이다.

React가 가상돔을 반영하는 흐름은 다음과 같다.

1. 데이터가 업데이트 되면, 전체UI를 가상돔에 리렌더링함.
2. 이전 가상돔 내용과 현재 가상돔 내용을 비교한다.(가상돔 끼리의 비교)
3. 바뀐 부분만 실제 Real DOM에 적용