React는 Virtual DOM을 통해 렌더링한다는 것은 알고 있었지만, 정작 Virtual DOM이 어디에 저장되는지 대한 생각은 한 번도 해보지 않았다.
React에서 Virtual이 어디에 저장되는지 살펴보자!

React

React는 사용자 인터페이스 구축을 위한 Javascript 라이브러리이며, React의 뛰어난 기능 중 하나는 Virtual DOM이다.

Virtual DOM

Virtual DOM은 React가 불필요한 re-rendering을 최소화하면서 사용자 인터페이스를 효율적으로 업데이트할 수 있게 해주는 중요한 개념이다.
Virutal DOM은 웹 페이지의 구조화된 표현인 실제 DOM을 메모리 내에서 가볍게 표현한 것이다. 이는 UI를 효율적으로 업데이트하고 성능을 최적화하기 위한 React 전략의 필수적인 부분이다.

Virtual DOM 정의

Virtual DOM은 HTML DOM의 가상 표현이다. 실제 DOM과 매우 유사한 계층적 트리 구조이지만, 메모리에만 존재한다.
React는 이를 사용하여 구성 요소와 해당 렌더링을 추적한다.

Virtual DOM 목적

Virtual DOM은 두 가지 주요 목적을 제공한다.

효율성

실제 DOM을 조작하는 것은 상대적으로 속도가 느리다. 특히 자주 업데이트하는 경우에는 더욱 느리다. Virtual DOM은 버퍼 역할을 하여 React가 가상 트리를 효율적으로 변경할 수 있도록 해준다. 그 다음 React는 실제 DOM을 업데이트하는 가장 효율적인 방법을 계산한다.

일관성

Virtual DOM은 UI의 일관성을 보장하므로 구성 요소 계층 구조가 얼마나 복잡해지는지에 관계없이 주어진 시간에 UI가 어떻게 보여야 하는지 더 쉽게 추론할 수 있다.

Virtual DOM의 생성 및 표현

Virtual DOM 생성

React 구성 요소가 렌더링될때 실제 DOM을 직접 업데이트하지 않는다. 대신, UI의 현재 상태를 나타내는 새로운 Virtual DOM 트리를 생성한다. 이 Virtual DOM 트리는 가벼운 javascript 객체이므로 실제 DOM보다 작업 속도가 훨씬 빠르다.

Virtual DOM은 아래와 같은 순서로 생성된다.

1. 초기 렌더링 : 구성 요소가 처음 렌더링되면 React는 구성 요소의 구조와 컨텐츠를 반영하는 Virtual DOM트리를 생성한다.
2. 후속 렌더링 : 구성 요소의 상태나 속성이 변경되면 React는 업데이트된 UI를 나타내기 위해 새로운 Virtual DOM 트리를 생성한다.

Virtual DOM 구조

Virtual DOM 트리는 실제 DOM 구조와 매우 유사하다. Virtual DOM 트리의 각 요소는 실제 DOM 요소에 해당한다.

• Virtual DOM 요소는 HTML <div> 요소를 나타낼 수 있다.
• class,id 및 style과 같은 Virtual DOM 속성은 실제 DOM 속성을 반영한다.
• Virtual DOM 요소의 하위 요소는 중첩된 요소를 나타낸다.

Virtual DOM 트리는 본질적으로 트리 구조를 가진 Javascript 객체이므로 React가 이전 Virtual DOM을 쉽게 탐색하고 비교할 수 있다.

Virtual DOM 업데이트

React 구성요소의 상태(state)나 props가 변경되면 React는 실제 DOM을 즉시 업데이트하지 않는다. 대신 Virtual DOM을 업데이트하는 과정을 거친다.

1. 상태(state) 또는 props 변경 : React는 일반적으로 이벤트 또는 사용자 상호 작용으로 인해 구성 요소의 상태 또는 props의 변경을 감지한다.
2. re-render : React는 업데이트된 UI를 나타내는 새로운 Virtual DOM 트리를 생성하여 구성 요소를 다시 렌더링한다.
3. Virtual DOM 비교 : React는 새로운 Virtual DOM 트리를 이전 트리와 비교한다. 이 프로세스를 'diffing' 이라고 한다.
4. 차이점 확인 : React는 새로운 Virtual DOM 트리와 이전 Virtual DOM 트리 간의 차이점을 식별한다. 이러한 차이점은 실제 DOM을 업데이트하는데 필요한 최소한의 변경사항 집합을 나타낸다.

재조정(Reconciliation) : Virtual DOM 비교

Reconciliation은 Virtual DOm 비교에서 발견된 차이점을 기반으로 실제 DOM을 업데이트하는 방법을 결정하는 프로세스이다.

1. 요소 생성 : React는 Virtual DOM에 추가되는 모든 요소에 대해 새로운 요소를 생성한다.
2. 요소 삭제 : React는 Virtual DOM에 더 이상 존재하지 않는 실제 DOM의 요소를 제거한다.
3. 요소 업데이트 : React는 텍스트 컨텐츠나 props값과 같이 Virtual DOM에서 변경된 요소를 업데이트 한다.

이러한 차이점을 계산하고 실제 DOM에 필요한 것만 업데이트함으로써 React는 UI가 응답성을 유지하고 효율적으로 업데이트되도록 보장한다.

Virtual DOM은 어디에 저장되는가?

Virtual DOM은 전적으로 메모리에 저장된다. 이는 웹 브라우저나 서버(SSR인 경우)의 메모리 공간에 있는 Javascript 개체이다.
Virtual DOM은 애플리케이션의 눈에 보이는 부분으로 저장되지 않고, React가 비교 및 렌더링 프로세스를 위해 사용하는 내부 데이터 구조이다.

Virtual DOM은 단지 Javascript 객체이기 때문에 React가 계산한 차이를 기반으로 실제 DOM을 업데이트할 때까지 애플리케이션의 HTML이나 CSS에 직접적인 영향을 미치지 않는다.
Virtual DOM과 실제 DOM 사이의 이러한 분리는 React가 성능 최적화를 달성하는 방법의 근본적인 측면이다.

실제 DOM의 역할

Virtual DOM이 UI의 효율적인 렌더링 및 업데이트를 처리하는 반면, 실제 DOM은 사용자에게 컨텐츠를 표시하는데 중요한 역할을 한다.
React가 Virtual DOM과 이전 Virtual DOM의 차이점을 판단하면 이러한 변경사항을 반영하기 위해 실제 DOM을 업데이트한다. 이 프로세스에는 실제 HTML 요소 수정, 속성 변경, 요소 추가 또는 제거, 텍스트 컨텐츠 업데이트가 포함된다.
실제 DOM은 사용자가 브라우저에서 보고 상호작용하는 것이며 화면에 최종 UI를 렌더링하는 역할을 한다.

Virtual DOM의 장점

• 성능 최적화 : Virtual DOM을 메모리에 유지하고 먼저 업데이트를 수행함으로써 React는 느린 실제 DOM과의 직접적인 상호작용을 최소화하여 전반적인 성능을 향상시킨다.
• 일관성 : Virtual DOM은 애플리케이션이 얼마나 복잡해지는지에 관계없이 UI의 일관된 보기를 보장한다. 개발자는 언제든지 UI 상태에 대해 유추할 수 있다.
• 효율성 : React의 Virtual DOM 업데이트는 변경된 요소만 포함하기 때문에 매우 효율적이다. 이를 통해 불필요한 re-rendering 및 업데이트가 줄어들어 애플리케이션 응답성이 향상된다.
• 개발자 생산성 : React 개발자는 DOM의 가상 표현으로 작업할 수 있으므로 복잡한 UI를 더 쉽게 구축하고 유지 관리할 수 있다. Virtual DOM과 실제 DOM을 분리하면 개발이 단순화된다.

< 출처 : https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f >