DOM과 Virtual DOM이란?

예시 페이지: 네이버/ 네이버를 예를 들자면 한 페이지 안에 헤더, 컨테이너,풋터로 구별되어있고 그 안에서도 수많은 element로 구성되어있다.

 

우리가 위와 같은 사이트를 볼때 하나의 페이지로 보지만 사실은 수많은 컴포넌트로 이루어져있다.

그리고 이러한 컴포넌트들을 element라고 한다.  DOM은 컴포넌트들을 tree 형태로 나타낸 것이다.
즉 DOM이란 페이지를 구성하는 컴포넌트를 tree형태를 나타낸 것으로 웹페이지의 구조를 나타낸 모델이라고 할 수 있다.  

 

DOM 구조 https://alstn2468.github.io/React/2019-11-04-ReactIntro

 

 

트리의 요소 하나하나를 '노드'라고 부르고 해당 노드에 접근하여 제어할 수 있는 기능을 제공해준다. 우리는 DOM을 통하여 이러한 노드에 접근하여 원하는 곳에 수정을 할 수 있는 것이다. 

그렇다면 Virtual DOM이란 무엇일까?

 

Virtual DOM이란 실제 DOM의 복제품이라고 생각하면 된다. Virtual DOM은 실제 DOM을 효율적으로 업데이트하기 위한 가상의 것이다.

변화가 이루어질때마다 실제의 DOM을 조작하는 작업은 무겁고  성능 상에 문제가 발생하기때문에 가상DOM을 통해서 더 가볍고 빠르게 조작을 수행한다.

React에서는 가상 DOM을 사용하여 컴포넌트 간의 상태 변경이나 이벤트 발생 시 업데이트를 처리한다. 그리고 변경 사항은 가상 DOM에 먼저 적용되고, 실제 DOM과 비교하여 변경 사항을 최소화한 후에 한 번에 업데이트된다. 

Virtual DOM이 처리되는 과정은 아래와 같다.

 

먼저 처리되는 과정에 대해서 알아보기 전에 리액트는 2가지 버전의 가상DOM을 가지고 있다는 사실을 알고 있어야한다. DOM의 상태를 메모리에 저장해두는 것이다. 

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
2. 화면 갱신 후 보여야 할 가상 DOM 객체

그리고 상태가 변화하여 리렌더링이 발생해서 실제 브라우저에 변화가 적용되는 과정은 다음과 같다.  

 

1. State Chage : State가 변경되어 리렌더링이 될때 2번의 가상 DOM을 만들게 된다.

 

2. Diffing : 2번에서 생성된 가상 돔(변경후)과 1번에서 이미 가지고 있던 가상돔(변경 전)을 비교하여 어느 부분에서 변화가 일어났는지 파악한다.이 과정을 리액트에서는 DIffing이라고 표현한다. 

 

3. Reconciliation(재조정): 파악이 끝난후, 변경이 일어난 부분만 실제 DOM에 적용시킨다. 이 과정에서는 매번 변화된 내용을 적용시키는 것이 아니라 변경된 모든 element들을 집단화시켜 한번 적용시키는 Batch Update가 일어나게 된다. 

 

✔️실제 DOM 조작은 비용이 많이 들고 느릴 수 있지만, 가상 DOM은 메모리에만 존재하기 때문에 더 빠르고 효율적으로 업데이트할 수 있고

✔️실제 DOM과 비교하여 변경 사항을 최소화한 후에 한 번에 업데이트되어 비용절감이 된다. 

 

[참고 사이트] 

React와 DOM, Web Component에 대해서

[React] DOM이란? Virtual DOM을 사용하는 이유?

 

Virtual DOM (React) 핵심정리