React를 배우다 보면 반복적으로 등장하는 개념 중 하나가 바로 Virtual DOM(가상 돔)이에요.
공부하면서 "왜 React는 빠를까?"에 대한 해답을 찾고 싶었고,
결국 그 중심에는 Virtual DOM이 있었습니다.
이 글은 제가 공부한 내용을 정리하며,
“React는 DOM을 어떻게 다루기에 이렇게 효율적일까?”라는 질문에 답을 찾은 과정을 공유하려고 씁니다.
📚 DOM이란 무엇일까?
먼저, DOM에 대한 개념을 정확히 짚고 넘어가야 해요.
DOM (Document Object Model)
= HTML 문서를 트리 구조의 객체로 표현한 것
예를 들어, 우리가 HTML을 이렇게 작성하면
<body>
<h1>안녕하세요</h1>
<p>React 공부 중입니다</p>
</body>브라우저는 이 문서를 아래처럼 트리 형태로 해석합니다:
document
└── html
└── body
├── h1
└── pJavaScript에서는 DOM을 조작하기 위해 getElementById(), querySelector() 같은 메서드를 사용하죠.
이런 식으로 특정 요소에 접근해 내용을 바꾸고, 스타일을 적용하고, 추가하거나 삭제하는 게 바로 DOM 조작입니다.
DOM 조작은 비용이 크다
공부하면서 놀랐던 건 단순히 텍스트 하나 바꾸는 것처럼 보여도
DOM 조작에는 다음과 같은 복잡한 과정이 따라온다는 거예요.....
- HTML 재파싱
- CSS 재계산
- 레이아웃 계산
- 화면 다시 그림 (Repaint, Reflow)
특히 여러 요소를 한 번에 조작할 경우, 이 부담은 더 커집니다.
DOM 자체는 가벼운 구조지만 브라우저가 이를 반영해 UI를 다시 렌더링하는 과정이 꽤나 무겁다는 걸 처음 알게 되었어요.
그래서 등장한 해결책: Virtual DOM
React는 이 문제를 해결하기 위해 DOM을 직접 조작하지 않아요.
대신 메모리 상의 Virtual DOM이라는 객체를 활용해,
화면 변경을 가볍고 빠르게 처리합니다.
Virtual DOM이란?
- 실제 DOM을 본뜬 자바스크립트 객체(실제 UI에는 직접적으로 나타나진 않음)
- 화면에 직접 영향을 주지는 않고 메모리에서만 존재
- 상태가 바뀔 때마다 새 Virtual DOM을 생성
- 이전 Virtual DOM과 비교(diffing) 후 변경된 부분만 실제 DOM에 반영
React의 Virtual DOM 렌더링 구조
이해를 돕기 위해, 제가 정리한 React의 Virtual DOM 렌더링 흐름입니다👇
📌 흐름 요약
- JSX 작성 → 우리가 쓰는 컴포넌트 코드
- Virtual DOM 생성 → JSX를 기반으로 메모리 안에 구조화
- ReactDOM → 실제 HTML로 변환
- 상태 변경 발생 → setState()
- 새 Virtual DOM 생성
- 이전과 새로운 Virtual DOM 비교(Diffing)
- 변경된 부분만 실제 DOM에 반영(Patch)
Diffing 알고리즘은 어떻게 작동할까?
공부하면서 가장 흥미로웠던 부분 중 하나는 바로 두 개의 Virtual DOM을 비교하는 방법이에요.
React는 이걸 효율적으로 하기 위해 몇 가지 규칙을 둡니다:
- 다른 태그는 새로 그림
<div> → <span>이면 완전히 새로 렌더링 - 같은 태그는 속성과 자식만 비교
<p class="a"> → <p class="b"> - 리스트는 key 속성으로 추적
key가 없으면 전체를 다시 탐색해야 하므로 성능 저하 발생
이러한 Diffing 알고리즘 덕분에 React는 복잡한 UI도 매우 빠르게 비교하고 반영할 수 있어요.
배치 업데이트(Batch Update)
DOM 조작에서 가장 비용이 큰 건 화면을 다시 그리는 것이에요.
그래서 React는 DOM 변경을 하나하나 즉시 적용하지 않고
변경된 요소들을 모아서 한 번에 처리해요.
이걸 Batch Update라고 부르며
성능을 높이는 핵심 메커니즘 중 하나입니다.
Virtual DOM vs Real DOM 한눈에 비교
| Virtual DOM | Real DOM | |
| 구조 | 자바스크립트 객체로 구성된 트리 구조 | HTML 기반의 브라우저 내부 트리 |
| 위치 | 메모리 안 (React 내부) | 브라우저 엔진 내부 |
| 렌더링 방식 | 변경 전, 메모리에서 시뮬레이션 | 직접 브라우저 화면(UI)에 렌더링 |
| 접근/조작 방식 | 간접적 (변경 사항을 계산 후 Patch) | 직접 요소에 접근하고 수정 |
| 속도 및 성능 | 빠름 – 변경된 부분만 반영 (최소 DOM 조작) | 느림 – 변경 시 전체 구조 탐색 또는 재계산 가능성 있음 |
💡 정리 포인트
- Virtual DOM은 React의 내부 렌더링 최적화를 위한 구조로, 실질적인 UI 변경 전 시뮬레이션을 통해 성능을 끌어올립니다.
- Real DOM은 실제로 사용자에게 보이는 웹페이지 구조로 직접 조작할수록 렌더링 비용이 커집니다.
✅ 정리하며
이번에 공부한 내용을 정리해보면
- DOM은 웹페이지를 구성하는 기본 단위이며 트리 구조를 가진다.
- DOM 조작은 리소스를 많이 사용하는 무거운 작업이다.
- React는 Virtual DOM이라는 개념을 통해
변경 사항을 먼저 메모리에서 계산하고 최소한만 실제 DOM에 반영한다. - 이 과정에서 Diffing 알고리즘, Patch, Batch Update 같은 최적화 전략이 적용된다.
'[React]' 카테고리의 다른 글
| React에서 useEffect(() => {}, [])를 쓰는 이유 (0) | 2025.04.17 |
|---|---|
| React에서 리렌더링은 언제 일어날까? (0) | 2025.04.04 |
| Heroicons로 React 아이콘 1초 삽입하기 |설치 없이 바로 복붙! (0) | 2025.03.31 |
| React에서 async/await 제대로 활용하기 (0) | 2025.03.29 |
| [React]Progress Bar 완벽 가이드: 직선 & 원형 프로그래스바 구현 (0) | 2025.02.10 |
