2025. 3. 15. 14:00ㆍ프론트엔드
React를 배우다 보면 React virtual Dom에 대한 이야기가 많이 나옵니다 왜 자주 언급될까요?
React Virtual DOM이 중요한 이유
우리는 왜 DOM을 조작을 해야할까요? 웹 어플리케이션들은 정적(static)하지 않기 때문입니다. 웹 애플리케이션의 동적 UI 관리에서 실제 DOM 조작은 성능 병목 현상을 유발합니다. React가 Virtual DOM을 도입한 핵심 이유는 실제 DOM의 비효율적인 업데이트 문제를 해결하기 위함입니다.
DOM 조작의 필요성
웹 애플리케이션은 단순한 문서가 아니라 사용자와 상호작용하는 프로그램입니다. 버튼 클릭 시 카운터 증가나 검색어 입력 실시간 반영 같은 동작 구현에는 UI 상태의 지속적인 갱신이 필요합니다. DOM은 이러한 상호작용 결과를 시각적으로 표현하는 최종 출력 수단이므로 조작이 불가피합니다.
이벤트란?
이벤트는 애플리케이션의 상태 변화를 유발하는 모든 트리거입니다. 크게 사용자 트리거 이벤트(키 입력, 스크롤, 창 크기 조정)와 시스템 트리거 이벤트(API 응답 수신, 웹소켓 메시지 도착)로 구분됩니다.
이러한 이벤트를 처리하는 동안 어떤일이 발생할까요? 일반적으로 우리는 어플리케이션이 의존하는 데이터를 업데이트 하는데, 만약 이 데이터가 데이터 모델의 상태를 표현할 때 반영할 수 있습니다. 데이터 모델의 상태가 변경되면 UI의 상태를 업데이트하여 이러한 변경점을 표현할 수 있습니다. 우리가 원하는 것은 UI 상태와 데이터 모델 상태라는 두 가지 다른 상태들을 동기화 하는 것입니다. 반대의 경우도 마찬가지구요. 이를 어떻게 표현할 수 있을까요?
상태 동기화 메커니즘
UI와 데이터 모델의 상태 일치를 위해 Angular는 양방향 데이터 바인딩을, React는 단방향 데이터 흐름 + Virtual DOM을 선택했습니다. 양방향 바인딩은 자동 동기화가 편리하지만 대규모 앱에서 성능 저하가 발생합니다. React의 접근법은 명시적 상태 관리를 통해 예측 가능성을 높이면서도 Virtual DOM으로 성능을 보완합니다.
Virtual DOM 작동 원리
1. 데이터 모델이 변경되면 UI를 Virtual DOM으로 재렌더링한다.
- 스냅샷 생성: 상태 변경 시 새 Virtual DOM 트리 생성
2. 데이터 변경 전 이전 Virtual DOM과 변경 후 현재 Vitrual DOM의 차이를 계산해놓고 변경되어야할 때 작동한다. - 변경 탐지: 이전/현재 트리를 비교하는 diff 알고리즘 실행 (O(n) 복잡도 최적화)
3. 변경이 필요한 것들만 real DOM에 업데이트한다.
- 선택적 렌더링: 실제 DOM에 필요한 최소한의 변경만 적용
특히 리액트의 재조정(Reconciliation) 과정은 컴포넌트 트리 구조를 분석해 동일 타입 엘리먼트는 유지하면서 속성만 업데이트하는 전략을 사용합니다. 예를 들어 <input> 요소의 placeholder 변경 시 전체 노드를 재생성하지 않고 해당 속성만 수정합니다.
기술 도입 배경
2013년 페이스북 뉴스피드 성능 문제 해결을 위해 개발된 이 개념은 배치 처리와 최적화 알고리즘을 이용하였습니다. 실제 DOM을 직접 건드리지 않고 메모리 내에서 모든 계산을 수행함으로써 얻은 주요 이점은 다음과 같습니다:
- 크로스 브라우저 호환성: DOM 조작 표준화 추상화 레이어 제공
- 개발자 경험 향상: 수동 최적화 없이도 자동으로 효율적인 업데이트 처리
- 애니메이션 유연성: requestIdleCallback을 활용한 렌더링 스케줄링
이 아키텍처는 2016년 도입된 React Fiber의 기반이 되었으며, 최근에는 Concurrent Features(Suspense, Transitions) 구현의 토대 역할을 하고 있습니다. 실제 벤치마크에서 10,000개 리스트 항목 업데이트 시 일반 DOM 조작 대비 3배 이상의 성능 향상을 보이고 있습니다.