[React] DOM?? Virtual DOM??

Virtual DOM은 React를 공부하면 자주 들을 수 있는 용어입니다.

Virtual DOM에 대해 자세히 알아보기 전, 먼저 DOM에 대해 알아보겠습니다.

 

 

1. DOM (Document Object Model)

사용자가 브라우저를 통해 어떤 웹사이트에 접속하면 버튼, 리스트, 제목 등 다양한 요소가 화면에 표시됩니다.

이러한 개별 요소를 Element라고 하며, 이 모든 요소를 포함하는 웹페이지 전체를 문서, 즉 Document라고 합니다. 

 

브라우저는 웹페이지의 HTML을 해석하여 이를 화면에 렌더링합니다.
이때 DOM이란 웹페이지의 HTML 요소(Element)들을 트리 형태의 구조로 표현한 것입니다.

DOM은 자바스크립트 객체는 아니지만 API를 가지고 있기 때문에 자바스크립트 조작이 가능합니다.

 

HTML에서 input, table, div 같은 요소들은 단순한 코드일 뿐입니다.
그러나 이 요소들이 HTML의 전체 구조에 맞게 브라우저에서 배치되고,

각 요소에 속성, 스타일, 위치 등을 조작할 수 있도록 기능이 부여된 상태가 바로 DOM입니다.

 

즉, HTML 코드로 작성된 웹페이지가 브라우저에서 화면에 렌더링되고,

사용자 이벤트에 반응하며 값을 입력받는 등의 기능을 수행하는 객체로 실체화된 형태가 DOM입니다.

 

또한 HTML의 각 요소들이 브라우저에서 실체화된 객체(Object)로 변환됩니다.

 

DOM 트리에는 각각의 HTML 요소(Element)에 해당하는 노드(Node)가 포함되어 있으며,
개발자는 DOM이 제공하는 API를 활용하여 DOM 구조에 접근해 특정 요소를 선택하고, 구조, 내용, 스타일 등을 변경할 수 있습니다.

이러한 DOM 조작을 통해 웹페이지의 동적인 변경이 가능해집니다.

 

DOM 이란

 

DOM 조작은 어떻게 이루어질까요?

브라우저는 현재 페이지의 HTML을 탐색하여 사용자가 조작한 Element를 찾고,

해당 Element와 자식 Element들을 제거한 뒤, 새롭게 수정된 Element로 교체합니다.

그 후 CSS를 다시 계산하고 레이아웃을 알맞게 조정한 뒤, 변경된 내용을 반영하여 브라우저에 화면을 다시 그립니다.

 

DOM은 트리 구조로 이루어져 있기 때문에 트리 내 정보를 업데이트하는 작업 자체는 비교적 가벼운 연산입니다.
그러나 DOM을 조작할 때마다 브라우저가 UI를 다시 그리는 과정(Repaint & Reflow)은 성능적으로 부담이 큰 작업입니다.

 

예를 들어, 리스트 항목 5개의 스타일을 개별적으로 변경해야 한다면,
브라우저는 이 과정을 5번 반복하여 UI를 다시 렌더링해야 하므로 비효율적인 DOM 조작이 발생하게 됩니다.

 

React는 이러한 DOM 조작의 성능 문제를 해결하기 위해 Virtual DOM을 사용합니다.
그렇다면 Virtual DOM이란 무엇일까요?

 

 

 

 

2. Virtual DOM (가상 돔)

Virtual DOM은 실제 DOM의 복사본과 같은 개념으로,
실제 DOM에 있는 모든 Element와 속성을 그대로 포함하고 있습니다.

 

Virtual DOM은 브라우저의 실제 DOM이 아니기 때문에 자바스크립트 객체 형태로 메모리에 저장됩니다.
복사본이므로 실제 DOM과 달리 브라우저 문서에 직접 접근할 수 없으며, UI를 조작할 수 있는 API도 제공하지 않아 수정할 수도 없습니다.

 

이처럼 Virtual DOM은 자바스크립트 객체일 뿐이므로,

실제 DOM을 조작하는 것보다 생성하고 접근하는 작업이 훨씬 가볍고 빠르게 실행됩니다.

 

React는 Virtual DOM을 어떻게 활용할까요?

React는 항상 두 개의 Virtual DOM 객체를 유지합니다.

1. 첫 번째 Virtual DOM: 렌더링 이전의 화면 구조를 담은 객체
2. 두 번째 Virtual DOM: 새로운 상태가 반영된, 렌더링 이후의 화면 구조를 나타내는 객체

 

React에서는 state(상태)가 변경될 때마다 화면이 다시 렌더링됩니다.
렌더링이 발생할 때마다, React는 새로운 Virtual DOM을 생성하여 업데이트된(렌더링 이후) 화면 구조를 저장합니다.

이 과정은 실제 브라우저에 반영되기 전에 메모리에서 이루어집니다.

 

이후, 렌더링 이전의 Virtual DOM(기존 상태)과 업데이트된 Virtual DOM(새로운 상태)을 비교하여 정확히 변경된 요소를 찾아냅니다.
이 과정을 Diffing이라고 부릅니다.

 

Diffing 과정

 

React는 효율적인 Diffing 알고리즘을 사용하여 변경된 요소를 정확하고 빠르게 탐지할 수 있습니다.
이렇게 바뀐 Element들을 파악한 다음, 변경된 요소만 브라우저 화면인 실제 DOM에 반영하는데,

이 과정을 Reconciliation(재조정)이라고 합니다.

 

React의 Reconciliation 과정이 매우 효율적인 이유는 Batch Update(배치 업데이트) 기법 덕분입니다.

Batch란 집단 혹은 무리라는 뜻이고, Batch Update는 변경된 모든 요소를 한꺼번에 모아서, 실제 DOM에 한 번만 반영합니다.

여러 개의 변경 사항을 한 번에 처리하는 것이죠.

 

예를 들어 10개의 리스트 항목이 변경되었다고 가정하면,

일반적인 DOM 조작 방식에서는 10번의 업데이트가 발생하지만,

React는 한 번의 배치 업데이트를 통해 모든 변경 사항을 적용하여 불필요한 DOM 조작을 줄이고 성능을 최적화합니다.

 

 

Virtual DOM은 브라우저에서 DOM 변경을 더 효율적으로 수행하기 위해 만들어진 개념입니다.

사용자가 작성한 React 코드가 실행되면, React는 이를 Virtual DOM 형태로 변환하여 메모리에서 먼저 구현한 후, 변경된 부분만 실제 DOM에 반영합니다.

즉, DOM 변경을 보다 빠르게 하기 위해 웹사이트에 로드된 React 라이브러리가 설계한 방식이 바로 Virtual DOM입니다.

 

 

 

 

 

---

참고 

https://www.youtube.com/watch?v=gc-kXt0tjTM

https://www.youtube.com/watch?v=1ojA5mLWts8&t=79s

 

 

틀린 내용이나 부족한 내용에 대한 피드백 댓글은 언제든지 환영입니다!