Virtual DOM

Virtual DOM이란 문자 그대로 가상의 DOM을 뜻하며, React의 핵심 원리이다.
React의 핵심 원리라고 했지만 Virtual DOM이라는 개념을 React에서만 사용하는 것은 아니다. 인기있는 프레임워크 중 하나인 Vue도 이 개념을 사용하고 있으며, Marko, Maquetto, Mithril 등 다양하다.

동적인 웹에서는 사용자의 요청이나 조건 등에 따라 사용자가 보게 될 뷰(view)를 변경해주어야 한다. 그런데 이렇게 특정 부분의 뷰를 변경시키려면 이벤트를 지정해 해당 이벤트가 발생했을 때 데이터가 수정되어야 하며, 이에 맞춰 DOM의 어떤 부분을 가져와서 어떻게 변화시킬지에 대한 내용을 지정해야 한다. 사용자가 보게 될 뷰를 변경하는 작업이 생각보다 복잡하다는 뜻이다.

그래서 React를 만든 페이스북은 Angular와 같은 기존 프레임워크들의 구동 방법처럼 사용자가 보는 화면에서 필요한 부분의 뷰를 변경하는 대신에 '데이터가 변경되면 기존 화면을 날려버리고 아예 새로 만들기' 라는 발상을 했다. 뷰가 변경되어야 할 때마다 화면을 아예 새로 그려버리기 때문에 변경될 부분을 찾고 변경될 로직을 지정해주는 등의 과정이 필요하지 않다.

변화가 필요할 때마다 아예 새로운 화면을 그려버리는 것은 변화에 필요한 복잡한 과정들을 생략시킬 수 있다는 뜻이다. 하지만 매번 새로운 뷰를 만든다는 것은 렌더트리 재생성과 레이아웃, 페인팅 과정이 매번 반복된다는 의미이기 때문에 전체 프로세스가 비효율적이다. 그래서 이 문제를 해결하기 위해 사용하는 게 바로 Virtual DOM이다.

변화가 일어날 때마다 새로운 DOM을 전부 만들어내는 것이 아니라 가상의 DOM에 렌더링을 거친 후, 기존 DOM과 비교한다. 그 다음 변화가 일어난 부분만 업데이트를 하는 것이다. 다른 말로 표현하자면, 완성본1과 완성본2를 비교해 변경 사항이 있는 부분만 완성본2의 내용으로 바꿔치기한다고 할 수 있다.

Virtual DOM은 이런 방식으로 브라우저가 연산해야 하는 양을 줄여 성능을 개선시킨다.

Virtual DOM에 대한 이해를 도와주는 영상