Virtual Dom에 대해

<Virtual Dom이란?>

문서 객체 모델(DOM)은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스입니다. DOM은 문서의 구조를 노드 트리로 표현하며, 스크립트가 문서의 내용과 구조에 접근하고 조작할 수 있는 방법을 제공합니다.

DOM 예시

 

<Virtual DOM 실행 방식>

1. 초기 렌더링 : 앱이 시작될 때, 전체 UI는 가상 DOM(Virtual DOM)으로 표현됩니다. React 요소가 생성되어 가상 구조로 렌더링 됩니다.
2. 상태와 Props 변경 : 앱 내에서 상태(state)와 props가 변경되면, React는 가상 DOM에서 해당되는 컴포넌트를 다시 렌더링 합니다.
3. 차이 비교 (Diff 알고리즘 사용) : React는 차이(diff)를 확인하기 위해 현재 가상 DOM과 이전 버전을 비교하는 diff 알고리즘을 사용합니다. 이 과정에서 두 버전 간의 차이점을 식별합니다.
4. 재조정 프로세스 (Reconciliation) : React는 식별된 차이를 바탕으로 실제 DOM을 업데이트하는 가장 효율적인 방법을 결정합니다. 전체 UI를 다시 렌더링 하는 대신, 실제 DOM에서 변경이 필요한 부분만 선택적으로 업데이트합니다. 이러한 선택적 업데이트는 빠르고 성능이 뛰어납니다.
5. 실제 DOM 업데이트 : React는 실제 DOM에 필요한 변경 사항을 적용합니다. 여기에는 3단계에서 감지된 차이에 따라 요소를 추가, 제거 또는 업데이트하는 작업이 포함됩니다.

<DOM Diffing>

UI 요소의 상태가 변경될 때마다 새로운 가상 DOM(Virtual DOM)이 생성됩니다. 이후 새로운 가상 DOM과 이전 가상 DOM을 서로 비교합니다.

이 과정의 목적은 실제 DOM에 최소한의 작업만 수행하도록 하는 것입니다. 따라서 차이 비교(diffing) 후, 실제 DOM을 업데이트하는 가장 효율적인 방법이 계산되어 UI가 효과적으로 업데이트됩니다.

DOM Differ 방식

 

<Reactjs Reconciliation>

React 재조정(Reconciliation)은 React가 브라우저 DOM을 업데이트하는 과정입니다. 이 과정을 통해 React는 DOM 업데이트를 더욱 빠르게 수행할 수 있습니다. React는 먼저 가상 DOM을 업데이트한 후, 차이 비교(diffing) 알고리즘을 사용하여 실제 DOM에서 효율적이고 최적화된 업데이트를 수행합니다.

 

그럼 Diffing 알고리즘은 뭔가요?

Virtual Dom이 이전 버전과 비교하는 방식은 다음과 같습니다. 

1. React는 두 개의 가상 DOM 트리를 비교할 때, 요소의 타입부터 비교합니다.
2. React는 변경된 노드를 찾았을 때, 해당 서브트리를 전체적으로 다시 렌더링 하기 때문에 너비우선 탐색 (Breadth-First Search, BFS)을 사용합니다. 깊은 우선 탐색 (DFS)은 이런 경우에 최적의 방법이 아니기 때문에 BFS가 더 적합합니다.
3. 두 요소의 타입이 동일하다면, React는 해당 노드를 유지하고 속성(attributes)이나 스타일에 대해서만 업데이트를 진행합니다. 즉, 요소가 완전히 교체되지 않고 필요한 부분만 수정합니다.
4. React는 최소한의 차이만을 계산하기 위해 최적화된 알고리즘을 사용하며, 이 과정을 O(N) 시간 복잡도로 효율적으로 수행합니다.

<Virtual Dom 장점들>

• 더 빠른 업데이트 : React는 가상 DOM을 사용하여 실제 DOM을 업데이트하는 데 필요한 최소한의 변경 사항만 계산합니다.
• 더 나은 성능 : React의 차이 비교(differ) 알고리즘은 속도에 최적화되어 있으며, DOM의 필요한 부분만 업데이트함으로써 성능을 향상합니다.
• 개선된 모듈화 : 가상 DOM은 렌더링 로직을 실제 DOM과 분리할 수 있는 방법을 제공하여, 컴포넌트의 관리와 재사용을 더 쉽게 만듭니다.
• 서버 사이드 렌더링 : React의 가상 DOM은 서버 사이드 렌더링을 가능하게 하여 애플리케이션의 초기 로딩 성능을 향상하고 검색 엔진에 대한 접근성을 높입니다.

<Virtual Dom 단점들>

• 메모리 오버헤드 : 별도의 가상 DOM을 유지하는 데 메모리를 소모하여 애플리케이션의 전체 메모리 사용량이 증가할 수 있습니다.
• 초기 렌더 오버헤드 : React의 초기 렌더링 과정은 가상 DOM을 생성하고 조정하는 오버헤드 때문에 느릴 수 있습니다.
• 잠재적인 성능 병목 : 특정 시나리오에서는 가상 DOM의 diffing 및 조정 과정이 성능 병목 현상이 될 수 있으며, 특히 복잡한 UI 구조나 빈번한 업데이트가 있는 애플리케이션에서 그렇습니다.

<요약>

가상 DOM (Virtual DOM)	실제 DOM (Real DOM)
원래 DOM의 가벼운 복사본입니다	HTML 요소의 트리 구조 표현입니다
JavaScript 라이브러리에서 유지 관리합니다	브라우저가 HTML 요소를 파싱한 후 유지 관리합니다
조작 후 변경된 요소만 다시 렌더링합니다	조작 후 전체 DOM을 다시 렌더링합니다
업데이트가 가볍습니다	업데이트가 무겁습니다
성능이 빠르고 UX가 최적화됩니다	성능이 느리고 UX 품질이 낮습니다
배치 업데이트를 수행하므로 매우 효율적입니다	업데이트 시마다 DOM을 다시 렌더링하기 때문에 효율성이 낮습니다

 

참고 자료 :

https://www.naukri.com/code360/library/virtual-dom-in-react

Virtual DOM in React - Naukri Code 360

https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/#:~:text=The%20virtual%20DOM%20is%20a,required%20on%20the%20real%20DOM.

What is the Virtual DOM in React?

https://www.geeksforgeeks.org/reactjs-virtual-dom/

ReactJS Virtual DOM - GeeksforGeeks

https://www.geeksforgeeks.org/explain-dom-diffing/

Explain DOM Diffing - GeeksforGeeks

https://www.geeksforgeeks.org/reactjs-reconciliation/

ReactJS Reconciliation - GeeksforGeeks

https://refine.dev/blog/react-virtual-dom/#too-many-re-renders

Understanding Virtual DOM in React | Refine

https://medium.com/@BharathkumarV/reacts-virtual-dom-17fdcb290a10

React’s Virtual DOM