Virtual DOM

quin1392·2022년 5월 30일
0

DOM은 HTML Elements, Attributes, CSS styles, Events, Methods 등을 제어할 수 있는 표준 인터페이스를 제공합니다. 단순하게 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체고 이 객체를 이용하여 웹 페이지 구성요소를 제어할 수 있다고 이해하면 됩니다.

왜 등장?

등장의 배경은 DOM 조작에 의한 렌더링이 비효율적이고 SPA(Single Page Application) 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보슈가 어려워지는 문제 때문에 DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주하게 되고, 그만큼 PC의 자원을 많이 소모하는 문제를 해결하기 위한 기술입니다. DOM의 메서드를 통해 DOM을 바꾸게 되면 그것을 인지한 브라우저 엔진은 렌더링을 다시 진행합니다.

  1. HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듭니다.
  2. 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듭니다.
  3. 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 합니다.
    DOM을 변경하는 것은 큰 문제가 아니지만, 변경할 구성 요소가 100개라면 100번의 렌더링이라는 비효율적인 문제가 발생합니다.

동작원리

virtual DOM이라는 것을 도입하여 위의 문제를 해결하였습니다. virtual DOM은 DOM과 유사한 역할을 하는 객체로 변경사항을 바로 DOM에 수정하지 않고, 먼저 virtual DOM을 수정하고 virtual DOM에 수정된 사항들을 한번에 DOM을 수정하며 한 번으로 많은 구성 요소를 변경할 수 있게 되었습니다.
실질적인 방법은 virtual DOM에 변경 내역을 한 번에 모으로(버퍼링) 실제 DOM과 변경된 virtual DOM의 차이를 판단한 후, 구성 요소의 변경에 대해 그에 따른 렌더링을 한 번만 하는 것으로 해결하였습니다.

주의사항

렌더링은 동시에 변경되는 사항에 대해서만 가능하며, 최적화의 문제가 존재합니다. virtual DOM은 메모리에 상주하기 때문에 메모리 사용량이 증가하며 virtual DOM을 조작하는 것도 많은 컴포넌트를 조작하게 된다면 오버헤드가 발생합니다.

0개의 댓글