[TIL] Virtual DOM

가상 DOM(VDOM)은 가상의 UI 표현이 메모리에 유지되고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 프로그래밍 개념입니다.

• 실제 DOM을 조작하는 작업이 무겁기 때문에 가상 DOM을 만들어 관리함으로써 빠르게 변경사항을 파악하고 반영할 수 있다.

등장배경

• DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.

  또한, 최근 모던 웹은 SPA(Single Page Application)을 사용한다. 하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이며, 여러 동적인 기능이 들어가기 때문에 안그래도 리소스가 모두 합쳐진 무거운 HTML 문서를 지속적으로 재랜더링 해줘야한다는 문제점이 발생하게 되었다.

  기존에는 화면의 변경사항을 DOM을 직접 조작하여 브라우저에 반영하였다. 하지만, 이 방법의 가장 큰 단점은 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이다.

작동원리

• Virtual DOM을 사용하는 React의 경우 UI에 원하는 상태를 알려주고 실제 DOM이 해당 상태와 일치하는지 확인합니다.

• React에서는 상태가 업데이트 됨에 따라 가상돔을 비교하게 되는데
  다르다면, 변경된 DOM요소를 파악하고 모아서 해당당 부분만 한 번에 리렌더링 시켜줍니다.

• 동작 순서

  1. 데이터(상태)가 업데이트 되었을 때, 전체 UI가 Virtual DOM에서 리랜더링 된다.
  2. 이전 DOM과 새로운 Virtual DOM의 차이가 계산된다.
  3. 계산이 끝난 후, DOM은 변경된 부분만을 변화시킨다.