DOM과 Virtual DOM

1. DOM

DOM이란 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체
즉, 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇을 의미한다.

querySelector 같은 API를 통해 DOM 구조안의 Element에 접근해 원하는 대로 내용, 스타일, 레이아웃 등을 수정 가능하다.

DOM은 요소들을 트리(Tree) 형태로 표현하며, 각 요소에 해당하는 노드(Node)가 존재한다

Node란 ?
: DOM의 구성요소(HTML 태그)로 노드들은 부모와 자식의 관계로 구성되어 있으며,
크게 3가지로 나뉜다.

• 요소 노드
  - div, p, span 등 문서의 구조적 요소를 구성하며, 자식 노드를 가질 수 있음
• 텍스트 노드
  - 순수한 텍스트를 가지며, 자식 노드를 가질 수 없음
• 주석 노드
  - 주석 텍스트를 담고 있으며, 렌더링이 되지 않음

일반적으로 웹페이지의 경우 화면의 업데이트가 수시로 발생하는데, 이는 곧 DOM이 수정된다는 말과 동일하다.

이 때 DOM이 수정될 경우 업데이트될 사항을 찾고 변경하는데 시간과 돈이 많이 들기 때문에 이를 방지하기 위해 Virtual DOM을 사용한다.

2. Virtual DOM

Virtual DOM은 가상 DOM으로, REACT는 렌더링이 발생될 상황에 놓이게 되면 새로운 화면에 들어갈 내용이 담긴 가상 DOM을 생성하게 된다.

REACT는 항상 렌더링 이전의 화면 구조와 렌더링 이후의 화면 구조를 가진 두 개의 가상 돔의 형태를 유지하는데, 이 두 가상 돔을 비교하여 변경된 부분만 실제 DOM에 반영하는 것이다.

이로 인해 변경된 내용만을 빠르게 업데이트하고 사용자에게 보여줄 수 있다.
👉 REACT 장점인 빠른 업데이트 및 렌더링이 해당 사항 때문에 적용된다.

위 이미지에서 Diffing이라는 용어가 나오는데, Diffing은 쉽게 말해 이전 트리와 비교해 변경된 부분을 찾아내는 과정이다. 해당 과정을 통해 어떤 컴포넌트가 어떻게 바뀌었는지를 계산하여 Virtual DOM에 적용시킨다.