돔과 가상돔의 개념 및 차이점

돔 (DOM; Document Object Model, 문서객체모델)

기존에 React나 Vue와 같은 SPA(Single Page Application) 을 위한 프레임워크(or 라이브러리) 가 나오기 전까지는,

자바스크립트로 인한 HTML에 동적인 변경이 있을 경우 전체 페이지를 검색해(DOM Tree를 검색해서) 해당 부분을 교체 한 후

전체 페이지에 대해 재 렌더링을 해주었다. 아주아주 간단한 코드로 예시를 들어보자.

 

let node = document.getElementById("myNode");

위 코드의 document가 DOM 객체라 볼 수 있는데,

기존에는 위와같이 HTML 구조 전체를 가지고 있는 document라는 객체를 이용해 해당 HTML 문서를 동적으로 수정할 수 있었다.

 

SPA가 아닌, 여러 페이지를 구성하고 페이지의 리소스가 크지 않다면 브라우저와 서버가 별로 부담이 되지 않겠지만,

하나의 웹 페이지를 어플리케이션 처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이며, Application이라 칭 할 만큼 여러 동적인 기능(실시간 기능)들이 들어가기 때문에 안그래도 리소스가 모두 합쳐진 HTML 문서를 지속적으로 재 렌더링 해주어야 하는 문제점이 발생하게 되었다.

 

예를들어 광고창 하나가 바뀌었다고 전체 페이지를 계속 갱신하는 상황에 이른것이다.

 

이에대한 문제점을 해결하기 위해 나온 개념이 Virtual DOM(가상돔)이다.

 

가상 돔 (Virtual DOM)

주로 SPA에서, 하나의 큰 HTML문서를 DOM으로 가지고 있고, 

해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다.

이 조립품들이 VirtualDOM이라 할 수 있다.

 

간단한 React 코드를 예시로 보자.

const VirtualDOM = () => {
  return
      <div>
        <p>Virtual DOM</p>
      </div>
};

 

위와같이 div태그 안에 p태그를 컴포넌트화 해줌으로써 조립품처럼 관리할 수 있게 되었다.

위 코드의 VirtualDOM 함수(객체) 자체가 가상돔이라 볼 수 있다.

 

 

기존에는 리소스가 큰 DOM 객체를 지속적으로 업데이트 해주어야 했지만,

그 전 단계로 Virtual DOM이 버퍼 역할을 해줌으로써 어떤 부분이 바뀔 지 미리 계산, 수정 후에

해당 수정된 부분만 업데이트 해주기 위한 기술이다.

 

이 개념으로 인해 SPA와같이 하나의 큰 DOM이 있을 경우에도, 부분만 수정을 해주는게 가능해져서, 

퍼포먼스와 메모리 관리가 효율적으로 가능하게 되었다.