background
React5분

React 파헤치기 2단계 - (VirtualDOM)

2025년 6월 11일

React 개발에서 가장 중요한 개념 중 하나는 VirtualDOM 이라고 봐도 무방하다. 그렇다면 실제 DOM과 VitrualDOM이 어떻게 다른 지, 왜 중요할까?

🧠 Virtual DOM vs Real DOM

1. 기본 개념 비교

구분Real DOM (실제 DOM)Virtual DOM (가상 DOM)
정의브라우저가 렌더링하는 실제 HTML 요소 트리메모리에서 React가 사용하는 JS 객체 기반의 DOM 구조
조작 위치브라우저메모리(JS 환경 내)
변경 시 동작직접 DOM 요소를 수정 (비용이 큼)변경사항을 가상 DOM에 적용 후 실제 DOM에 최소 반영

2. 동작 원리 비교

✅ Real DOM

  • 변화가 생기면 전체 DOM 구조를 재탐색하고 직접 요소를 다시 그려야 함
  • 예: 버튼을 눌러 숫자 하나를 바꾸려 해도 전체 DOM을 다시 확인하고 업데이트

✅ Virtual DOM (React의 핵심)

  • 변경이 생기면:
    1. 기존 Virtual DOM과 새로운 Virtual DOM을 비교 (Diffing)
    2. 변화된 부분만 실제 DOM에 최소한으로 반영 (Reconciliation)
    3. 이를 통해 DOM 조작 횟수 최소화 + 성능 최적화

3. 코드 예시로 이해하기

javascript
코드 복사
// 상태 업데이트 전
<div>
  <h1>Hello</h1>
  <p>Count: 0</p>
</div>

// 상태 업데이트 후
<div>
  <h1>Hello</h1>
  <p>Count: 1</p>
</div>

🔍 Real DOM은 div 전체를 다시 확인하면서 모든 노드를 탐색해 렌더링하지만

🔍 Virtual DOM은 <p> 태그 안의 0 → 1만 바뀐 것을 감지하고 그 부분만 업데이트

4. 성능 측면 비교

항목Real DOMVirtual DOM
렌더링 비용높음 (DOM 접근 느림)낮음 (메모리 내 조작)
업데이트 속도느림빠름
리소스 소모브라우저 리소스를 많이 사용JS 메모리 활용, 효율적
변화 감지수동으로 직접 추적자동 Diff 알고리즘으로 효율 감지

5. 장단점 비교

Virtual DOM 장점단점
✅ 성능 최적화 (필요한 부분만 렌더링)❌ 매우 복잡한 컴포넌트 트리에서는 diff 연산 비용 증가 가능
✅ React의 선언형 프로그래밍과 잘 어울림❌ 메모리를 JS 객체로 더 쓰게 됨
✅ 유지보수성과 확장성 향상❌ 애니메이션 등에서는 Real DOM보다 덜 자연스러울 수 있음

6. 정리 요약

React의 Vitrual DOM은 실제 DOM보다 빠르고 효율적인 DOM 조작을 가능하게 해주는 중간 계층임

메모리 상의 가상 DOM에서 변화 감지 → 실제 DOM을 최소한만 업데이트 → 전체 렌더링 비용 감소

결과적으로 React는 UI 업데이트 성능이 뛰어나며, 개발자가 쉽게 상태 기반 UI를 구축할 수 있게 함.

🔎 왜 Virtual DOM이 필요한가?

  • 브라우저 DOM은 느리고, 조작 비용이 큼
  • React는 UI를 상태 기반으로 통째로 다시 그리는 방식을 선호, 이 때 전체 DOM을 매번 수정하면 너무 비효율적임
  • 따라서 Vitrtual DOM이 가볍고 빠른 비교 대상으로 중간에 존재하는 것이 효율적인 상태 UI 구현이 가능

태그

#React
이전 글

React란?

다음 글

React 파헤치기 1단계 - (useEffect, useCallback, useMemo)