[프론트엔드] DOM & Virtual DOM

tjcldnjs 2024. 3. 22. 14:36

DOM

DOM(Document Object Model, 문서 객체 모델)은 스크립트 언어로 HTML 요소를 제어할 수 있도록 웹 문서를 객체화 한 것이다.

<html>
  <head>
    <meta>
    <title></title>
  </head>
  <body>
    <div>
      <h1></h1>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

HTML이 작성되는 형식을 보면 위와 같은데, 이러한 구조를 표현하면 아래와 같이 나타낼 수 있다.

이를 나무 모양의 트리구조를 갖게 된다고 하여 DOM tree라고 하며, 각 요소를 노드라고 한다.

브라우저의 동작 과정

위의 브라우저 동작 과정 그림을 살펴보면 HTML 코드로 DOM 트리를 생성하고, 이에 스타일을 조합하고, 화면에 어떻게 배치할지 정리 및 렌더링하여 화면에 표시하게 된다.

Virtual DOM

SPA 방식과 같은 페이지에서 일부만 변경하게 되더라도 일련의 과정을 모두 거치게 되므로 많은 비용이 소모되는데, 이를 보완하기 위해 사용되는 가상의 DOM이다. Virtual DOM은 class나 style 등의 속성은 가지고 있지만, DOM API 메서드를 가지지 않는다.

Virtual DOM 동작 과정

1. Virtual DOM은 최초에 브라우저가 렌더링 될 때의 DOM 트리를 virtual DOM으로 복사한다.

2. DOM 노드에 변화가 생기면 새로운 virtual DOM을 생성한다.

3. (1)에서 생성한 초기 virtual DOM 트리와 (2)에서 생성한 변경된 virtual DOM 트리를 비교한다.

4. 변경된 부분을 DOM에 반영하고 해당 부분만 리렌더링한다.