Virtual DOM 기반 최소 DOM Mutation으로 브라우저 렌더링 병목 해결

How React's Virtual DOM Works Under the Hood

Janmejai Singh2026년 5월 21일7분intermediate

AI 요약

Context

실시간 UI 업데이트 시 발생하는 브라우저의 Style Recalculation, Layout, Repaint 과정으로 인한 성능 저하 발생. 직접적인 DOM 조작 방식은 잦은 리플로우를 유발하여 사용자 경험의 저하와 UI 렉(Jank)을 초래하는 구조적 한계 보유.

Technical Solution

메모리 내 가벼운 JavaScript 객체로 UI 트리 구조를 추상화한 Virtual DOM 도입
상태 변경 시 전체 DOM을 교체하지 않고 새로운 Virtual DOM 트리를 생성하여 메모리 상에서 비교
Diffing 알고리즘을 통한 구 트리의 노드와 신 트리의 노드를 대조하여 최소한의 변경 세트(Change Set) 도출
동일 타입 노드 유지 및 다른 타입 노드 시 서브트리 전체 재구축이라는 휴리스틱 적용으로 비교 연산 최적화
Key 프로퍼티를 활용한 리스트 아이템의 고유 식별자로 노드 재사용성 극대화 및 불필요한 파괴/생성 방지
Diffing 결과로 산출된 최소 변경 사항만 실제 DOM에 반영하는 Commit Phase로 렌더링 비용 최소화

실천 포인트

- 리스트 렌더링 시 index 대신 고유 ID를 key로 설정하여 노드 재사용 효율성 확보 - 불필요한 리렌더링 방지를 위해 컴포넌트 구조의 계층적 분리 및 memo 적용 검토 - DOM 조작 횟수와 렌더링 파이프라인(Reflow/Repaint)의 상관관계를 고려한 UI 설계 수행

태그

#Render Pipeline #DOM Mutation #Virtual DOM #Diffing Algorithm #Reconciliation

원문 읽기