[React] Virtual DOM: 리액트의 핵심 기술

 

들어가며

웹 애플리케이션에서 성능과 효율성을 높이기 위해 React는 Virtual DOM이라는 개념을 도입했습니다. Virtual DOM은 실제 DOM을 추상화한 가상의 DOM 구조로, DOM 업데이트 과정을 최적화하여 빠르고 부드러운 사용자 경험을 제공합니다. 이번 글에서는 Virtual DOM의 정의부터 동작 방식, 장점 그리고 실제 DOM과의 차이점까지 살펴보겠습니다.

 

---

Virtual DOM

Virtual DOM이란?

Virtual DOM은 실제 DOM의 가벼운 복사본으로, 메모리에서 동작하는 객체입니다. React는 상태(State) 변화가 있을 떄마가 새로운 Virtual DOM을 생성하고, 변경사항을 감지해 필요한 부분만 실제 DOM에 반영합니다.

 

간단 예제

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

이 예제에서 버튼을 클릭할 때마다 상태가 변경되며, React는 새로운 Virtual DOM을 생성합니다. 이후, 이전 Virtual DOM과 비교하여 `<p>` 태그의 내용만 업데이트합니다.

 

주요 특징

• 가벼움 : 실제 DOM보다 훨씬 가벼워 빠르게 생성 및 조작이 가능합니다.
• 독립성 : Virtual DOM은 실제 DOM과 독립적으로 동작하여 애플리케이션의 흐름을 방해하지 않습니다.
• 단일 책임 원칙 : UI 상태 변경 및 반영의 책임을 Virtual DOM이 맡아 코드의 가독성과 유지 보수성을 높입니다.

 

동작 방식

Virtual DOM은 상태 변화에 따라 다음과 같은 3단계로 동작합니다.

• 렌더링 단계 : 상태가 변경되면 새로운 Virtual DOM이 생성됩니다.
• Diffing 단계 : 이전 Virtual DOM과 새롭게 생성된 Virtual DOM을 비교하여 차이점을 찾습니다.
• Patching 단계 : 감지된 차이점만 실제 DOM에 반영합니다. 이 과정은 "Reconciliation (조화 과정)"이라고도 불립니다.

Diffing 알고리즘 동작 방식

• 동일한 요소는 그대로 유지 : 같은 타입의 요소는 재사용됩니다.
• 다른 요소는 교체 : 다른 타입의 요소는 새로운 요소로 교체됩니다.
• 리스트에서 Key 사용 : 리스트 항목을 비교할 때 Key를 사용해 효율적으로 변경 사항을 감지합니다.

 

장점

1. 성능 최적화

Virtual DOM은 실제 DOM을 직접 조작하지 않고 메모리에서 변경 사항을 먼저 계산한 후 최소한의 DOM 조작만 수행합니다. 이를 통해 성능이 크게 향상됩니다.

2. 효율성

Virtual DOM은 변경된 부분만 실제 DOM에 업데이트합니다. 전체 DOM을 다시 렌더링하지 않기 때문에 효율적입니다.

3. 개발 편의성

Virtual DOM을 사용하면 개발자가 DOM 조작을 직접 관리할 필요 없이 선언적으로 UI를 작성할 수 있어 코드 유지 보수가 용이합니다.

 

---

Virtual DOM과 실제 DOM

차이점

구분	Virtual DOM	실제 DOM
작업 위치	메모리 내에서 동작	브라우저에서 직접 동작
속도	빠름	느림
업데이트 방식	부분 업데이트	전체 업데이트
비용	낮음	높음
Reflow/Repaint	최소화	자주 발생

 

Virtual DOM이 실제 DOM보다 빠르고 비용이 적게 드는 이유

1. DOM 조작 최소화

실제 DOM을 직접 수정하는 것은 비용이 많이 드는 작업입니다. Virtual DOM은 변경 사항을 메모리에서 먼저 처리한 후, 필요한 부분만 실제 DOM에 반영합니다.

2. 효율적인 Diffing 알고리즘

React는 두 개의 Virtual DOM을 비교(diffing)하여 변경된 부분만 찾아 업데이트합니다. 이 알고리즘은 O(n)의 시간 복잡도를 가지며, 실제 DOM을 직접 조작하는 것보다 훨씬 효율적입니다.

3. Batching (배치 처리)

React는 여러 상태 업데이트를 하나로 묶어 처리하는 배치(batch) 작업을 수행합니다. 이를 통해 여러 번의 DOM 업데이트를 한 번에 처리하여 렌더링 비용을 줄입니다.

4. 메모리에서 동작

Virtual DOM은 메모리에서 동작하므로, 실제 DOM보다 가볍고 빠릅니다.

5. Reflow 및 Repaint 최소화

Virtual DOM은 Reflow 및 Repaint를 최소화하여 브라우저 렌더링 성능을 개선합니다.

 

---

더 알아보기

최적화 기법

• Key 사용 : 리스트 렌더링 시 `key`를 사용해 DOM 업데이트 효율을 높입니다.
• React.memo/PureComponent : 불필요한 리렌더링을 방지합니다.
• shouldComponentUpdate : 수동으로 업데이트 조건을 제어할 수 있습니다.
• Lazy Loading : 필요한 경우에만 컴포넌트를 로드하여 초기 렌더링 속도를 높입니다.

 

Virtual DOM의 한계

• 초기 렌더링 속도가 느릴 수 있습니다.
• 대규모 애플리케이션에서는 추가적인 메모리 사용량이 발생할 수 있습니다.
• 복잡한 애니메이션이나 CSS 트랜지션에서는 성능 저하가 발생할 수 있습니다.
• 리스트 항목이 너무 많을 경우 diffing 과정이 느려질 수 있습니다.