Virtual DOM(가상 DOM)이란?

Virtual DOM이란?

React에서 사용하는 Virtual DOM(가상 DOM)은 JavaScript 객체로, 실제 DOM의 경량화된 복사본입니다.

Virtual DOM은 실제 DOM과의 차이를 최소화하여 브라우저에서의 렌더링 성능을 최적화하기 위해 도입된 개념입니다.

Virtual DOM을 사용하면, 브라우저의 직접적인 DOM 조작을 줄여 성능을 크게 향상시킬 수 있습니다.

DOM 조작의 문제점

브라우저는 DOM을 기반으로 웹 페이지의 구조를 유지하고, 이를 화면에 그립니다. 하지만 DOM을 자주 조작하는 것은 성능에 부정적인 영향을 미칠 수 있습니다.

DOM 조작이 일어날 때마다 브라우저는 Reflow와 Repaint를 발생시키는데, 이러한 작업들은 CPU와 메모리를 많이 사용하기 때문에 페이지의 성능을 저하시킬 수 있습니다.

Virtual DOM의 역할

Virtual DOM은 이러한 성능 문제를 해결하기 위해, 실제 DOM을 조작하기 전에 그 변경 사항을 메모리 상에서 미리 계산합니다.

이후, 차이점(diffing)만을 실제 DOM에 반영함으로써 불필요한 DOM 조작을 최소화합니다.

Virtual DOM의 동작 방식

Virtual DOM은 다음과 같은 순서로 동작합니다.

1. Virtual DOM 생성: 컴포넌트가 처음 렌더링될 때, Virtual DOM이 메모리 상에서 생성됩니다. 이 Virtual DOM은 실제 DOM의 가벼운 복사본으로, 렌더링된 상태를 나타냅니다.

2. 상태 변화: 사용자가 상호작용하거나 상태(state)가 변경되면 새로운 Virtual DOM이 생성됩니다. 이 Virtual DOM은 변경된 상태를 반영한 새로운 트리 구조를 가집니다.

3. Diffing: 새로운 Virtual DOM과 이전 Virtual DOM을 비교하여, 변화된 부분만을 찾아내는 과정을 diffing이라고 합니다.

4. Reconciliation: diffing 과정에서 찾은 변경 사항을 실제 DOM에 반영하는 과정을 reconciliation이라고 합니다. Virtual DOM이 실제 DOM과 차이 나는 부분만 효율적으로 업데이트하므로, 성능을 크게 향상시킬 수 있습니다.

Diffing와 Reconciliation 과정

Diffing은 두 Virtual DOM 트리(이전 상태와 새로운 상태)를 비교하여 달라진 부분을 찾아내는 과정입니다. React는 효율적인 비교를 위해, 두 트리의 각 노드를 깊이 우선 탐색 방식으로 비교합니다. 동일한 레벨에 있는 노드끼리만 비교하므로, 성능이 매우 효율적입니다.

• 동일한 타입의 요소: 두 요소가 같은 타입일 경우, React는 기존 노드를 재사용하고, 속성만 업데이트합니다.
• 다른 타입의 요소: 요소의 타입이 다르면, 기존 노드를 제거하고 새로운 노드를 생성합니다.
• 자식 노드: 자식 노드가 있다면, 해당 노드들에 대해서도 동일한 방식으로 비교를 수행합니다.

Reconciliation은 diffing 과정에서 발견된 차이점을 실제 DOM에 반영하는 단계입니다. React는 가능한 한 최소한의 변경만을 실제 DOM에 적용하여 성능을 최적화합니다. React의 reconciliation 과정은 다음과 같은 방식으로 동작합니다:

1. 노드 추가/삭제: 새로운 요소가 추가되거나, 기존 요소가 삭제될 때만 DOM을 업데이트합니다.
2. 속성 변경: 요소의 속성 값만 변경된 경우, 해당 속성만 업데이트합니다.
3. 텍스트 노드 변경: 텍스트 내용이 변경된 경우, 해당 텍스트 노드만 다시 렌더링합니다.

과정을 정리한 표

단계	과정
1. 이전 Virtual DOM과 새로운 Virtual DOM 생성	상태나 props가 변경되면 새로운 Virtual DOM이 생성됩니다.
2. Diffing	이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 찾아냅니다.
3. 노드 비교	동일한 타입의 노드는 속성만 업데이트하고, 다른 타입의 노드는 제거 후 새로 추가합니다.
4. 자식 노드 비교	자식 노드가 있다면 같은 방식으로 비교가 수행됩니다.
5. Reconciliation	Diffing 결과에 따라 변경 사항만 실제 DOM에 반영합니다.
6. DOM 업데이트	최소한의 DOM 변경 작업만 수행하여 렌더링 성능을 최적화합니다.

Virtual DOM의 장점

1. 성능 최적화: Virtual DOM은 브라우저에서 발생하는 비싼 작업인 Reflow와 Repaint를 최소화하여, 성능을 향상시킵니다.

2. 간편한 업데이트: React는 상태나 props가 변경될 때마다 Virtual DOM을 통해 변경 사항을 효율적으로 관리하므로, 개발자는 복잡한 DOM 조작을 신경 쓰지 않아도 됩니다.

3. 효율적인 렌더링: Virtual DOM은 DOM 전체를 다시 렌더링하는 대신, 변화된 부분만을 실제 DOM에 반영하므로 렌더링 효율이 크게 향상됩니다.

Virtual DOM의 한계

1. 메모리 사용량: Virtual DOM을 메모리 상에 계속 유지해야 하므로, 메모리 사용량이 증가할 수 있습니다.
2. 복잡한 연산: 복잡한 애플리케이션에서는 diffing 과정이 많아질수록 연산 비용이 커질 수 있습니다. 그러나 React는 이런 상황을 대비해 최적화된 알고리즘을 사용하고 있습니다.

결론

Virtual DOM은 React의 성능 최적화의 핵심 요소로, 실제 DOM 조작을 최소화하여 빠르고 효율적인 렌더링을 가능하게 합니다.

Diffing과 Reconciliation 과정을 통해 변경된 부분만 업데이트되며, 이는 애플리케이션의 성능을 높이는 중요한 기법입니다. Virtual DOM은 복잡한 애플리케이션에서 DOM 조작을 간단하고 효율적으로 처리하는데 큰 역할을 합니다.