본문으로 건너뛰기

Virtual DOM(가상 DOM)

Virtual DOM이란?​

Virtual DOM은 실제 DOM(Document Object Model)을 그대로 조작하지 않고,
메모리 상에 가벼운 DOM 구조를 하나 더 만들어 UI 변경을 효율적으로 처리하는 방식이다.

실제 DOM 조작은 비용이 크기 때문에,
React 같은 라이브러리는 DOM을 직접 만지기 전에 Virtual DOM에서 먼저 계산한다.

Virtual DOM이 필요한 이유​

DOM 조작은 생각보다 비싸다​

브라우저에서 DOM은 단순한 트리 구조가 아니다.
DOM은 렌더링 엔진과 강하게 결합된 상태 기반 객체이며,
조금만 변경되어도 복잡한 렌더링 파이프라인이 다시 실행될 수 있다.

DOM이 변경되면 내부적으로 다음 과정이 발생한다.

  1. Style 계산 (Recalculate Style)
  2. Layout (Reflow)
    • 요소의 크기, 위치 재계산
  3. Paint (Repaint)
    • 픽셀 단위로 다시 그리기
  4. Composite

특히 Reflow는 트리 구조 전체에 영향을 줄 수 있기 때문에 비용이 매우 크다.
하나의 DOM 변경이 연쇄적인 렌더링 작업으로 확장될 수 있다.

Virtual DOM 동작 과정​

  1. 초기 렌더링 (Initial Render)

    • 컴포넌트 실행
    • JSX를 기반으로 Virtual DOM 트리 생성
    • 최초 한 번 실제 DOM에 반영

  2. 상태(state / props) 변경

    • 상태가 변경되면 컴포넌트가 다시 실행됨
    • 새로운 Virtual DOM 트리 생성

  3. Diffing (비교 단계)

    • 이전 Virtual DOM과 새로운 Virtual DOM을 비교
    • 어떤 노드가 변경되었는지 계산
    • key, 타입, depth 기준으로 비교
    • 이 단계에서는 실제 DOM을 건드리지 않음

  4. Reconciliation (재조정 단계)

    • Diffing 결과를 기반으로
      • 어떤 DOM 노드를 재사용할지
      • 어떤 노드를 제거/생성할지 결정
    • 실제 DOM에 적용할 최소 변경 사항(Patch) 계산

  5. Commit Phase (Real DOM 업데이트)

    • 계산된 변경 사항만 실제 DOM에 반영
    • 필요한 부분만 DOM 수정
    • 이 단계 이후 useEffect가 실행됨

Virtual DOM의 핵심 포인트​

Virtual DOM은 DOM이 아니다​

Virtual DOM은 이름 때문에 오해하기 쉽지만,
실제 DOM을 복사한 것이 아니다.

  • 브라우저 DOM API와 무관
  • 렌더링 엔진과 연결되지 않음
  • 단순한 JavaScript 객체 트리

즉, Virtual DOM은 화면에 무엇이 그려져야 하는지를 표현한 데이터 구조에 가깝다.

실제 DOM을 직접 비교하지 않는다​

Virtual DOM의 중요한 특징 중 하나는
실제 DOM과 Virtual DOM을 비교하지 않는다는 점이다.

React는 다음을 비교한다.

  • 이전 Virtual DOM
  • 새로운 Virtual DOM

실제 DOM은 비교 대상이 아니다.
실제 DOM은 오직 결과를 반영하는 대상일 뿐이다.

이 구조 덕분에:

  • 브라우저 환경에 의존하지 않고
  • 예측 가능한 방식으로 UI 변경을 계산할 수 있다.

변경 전/후 상태를 비교해 “차이만” 반영한다​

상태가 변경되면 React는:

  1. 새로운 Virtual DOM을 생성하고
  2. 이전 Virtual DOM과 비교(diffing)한 뒤
  3. 변경된 부분만 실제 DOM에 반영한다.

이 과정에서 중요한 점은:

  • 전체 UI를 다시 그리는 것처럼 보이지만
  • 실제 DOM은 필요한 부분만 수정된다는 것이다.

즉, Virtual DOM의 역할은

“무엇이 바뀌었는지 계산하고 실제 DOM은 최소한으로만 건드리게 만드는 것”

장점​

  • 성능 최적화
    • 직접적으로 DOM을 조작하는 작업은 느리고 리소스를 많이 소모합니다. Virtual DOM은 변경된 부분만 실제 DOM에 반영하여 DOM 조작의 오버헤드를 줄입니다.
  • 효율적인 렌더링
    • 모든 상태 변화가 새로운 가상 DOM을 생성하고 비교하더라도, 이는 메모리에서 이루어지는 작업이므로 속도가 빠릅니다.
  • 브라우저 호환성
    • Virtual DOM은 브라우저 독립적입니다. React는 Virtual DOM을 통해 여러 브라우저 환경에서도 일관된 동작을 제공합니다.
  • 코드 간결성
    • 개발자는 DOM 조작에 직접 신경 쓰지 않아도 됩니다. React가 Virtual DOM을 통해 상태 변화와 UI 업데이트를 관리합니다.

단점​

  • 메모리 사용 증가
    • Virtual DOM 트리를 유지해야 합니다.
  • Diffing 비용
    • 아주 단순한 화면에서는 오히려 손해일 수 있습니다.
  • 무조건 빠른 건 아님
    • 잘못된 구조(불필요한 리렌더링)는 성능 저하로 이어집니다.

Virtual DOM vs Real DOM​

구분Virtual DOMReal DOM
업데이트변경된 부분만전체 영향 가능
비용비교 + 최소 반영직접 조작 비용 큼
개발 방식선언적명령형
유지보수쉬움어려움

Virtual DOM에 대해 자주 하는 오해​

“React는 Virtual DOM이라서 무조건 빠르다”

Virtual DOM이 있다고 해서 자동으로 성능이 좋아지는 건 아니다.

  • 불필요한 state 변경
  • 의미 없는 상위 컴포넌트 리렌더링
  • 잘못된 key 사용

이런 게 쌓이면
Virtual DOM이 있어도 화면은 충분히 느려질 수 있다.

Virtual DOM은 최적화를 대신 해주는 존재가 아니라
최적화할 수 있는 구조를 제공하는 도구에 가깝다.

“리렌더링은 곧 DOM 전체를 다시 그리는 것이다”

React에서 리렌더링은 컴포넌트 함수가 다시 실행되는 것을 의미한다.

  • Virtual DOM은 다시 만들어지지만
  • 실제 DOM은 diff 결과에 따라 일부만 수정된다

그래서 “리렌더링 = 화면 전체가 다시 그려진다”는 말은 정확하지 않다.

“Virtual DOM이 실제 DOM을 복사한 것이다”

Virtual DOM은 DOM의 복사본이 아니다.

  • 브라우저 DOM API를 사용하지 않고
  • 단순한 JavaScript 객체일 뿐이다

실제 DOM과 Virtual DOM을 직접 비교하는 일도 없다. 비교는 Virtual DOM끼리만 이루어진다.

정리​

  • Virtual DOM은 DOM을 빠르게 만드는 마법이 아니다.
  • 실제 DOM을 바로 건드리지 않기 위해 한 단계 거치는 구조다.
  • 결국 중요한 건 “얼마나 빨리 그리느냐”가 아니라 얼마나 적게 DOM을 만지느냐다.

React를 쓰면서 정말 신경 써야 할 건 Virtual DOM 자체가 아니라,

  • 왜 이 컴포넌트가 다시 렌더링되는지
  • 이 상태 변경이 정말 필요한지
  • 렌더링 범위를 어디까지 가져갈지

같은 렌더링 흐름에 대한 이해다.