리액트는 왜 가상돔을 사용할까

정주·2026년 1월 25일

DOM React batch update diffing reconciliation virtual DOM

리액트

목록 보기

2/2

들어가며

맨날 많이 들어보고, 얼레벌레 알고 있던 개념들을 이번에 제대로 정리해보고 싶어서

글로 남겨봅니다-☆

DOM이란?

Document Object Model의 약자
마크업 언어로 작성된 문서(html, ml)를 프로그래밍 언어(javascript)가 조작할 수 있도록 하는 인터페이스
계층적 구조를 가진 노드 트리로 구성됨

⇒ 자바스크립트가 html을 이해하고 조작할 수 있게 해주는 중간 다리

DOM은 왜 필요할까?

마크업 언어에는 자바스크립트가 요소(element)에 직접적으로 접근할 수 있는 방법이 없습니다.
동적인 웹 페이지를 구현하려면 자바스크립트와 같은 프로그래밍 언어가 문서에 접근하고, 제어할 수 있는 수단이 필요합니다.

WHY? 특정 요소를 수정하고, 이벤트를 처리하고, 화면에 다시 그리는 작업을 거쳐야 동적인 웹 페이지를 만들수 있기 때문입니다.

⇒ SO 문서에 접근하고, 제어할 수 있는 수단인 DOM이 필요합니다.

DOM으로 할 수 있는 것들

요소(element)에 접근
이벤트 핸들러 추가
요소 추가 / 제거 / 수정
속성(attribute) 변경

DOM은 왜 계층적 구조일까?

계층적 구조에서는 노드들 간의 관계가 부모, 자식,형제 등으로 정의합니다.

이는, 명확하게 노드들의 관계를 알 수 있게하여 이벤트 처리에 유리합니다.
- 왜 이벤트 처리에 유리할까요?
  
  이벤트는 DOM의 상하 관계에 따라 전파됩니다.
  - 이벤트 버블링 : 이벤트가 발생한 요소로부터 상위 요소로 이벤트가 전파되는 과정
  - 이벤트 캡처링 : 최상위 요소에서 발생한 이벤트가 하위 요소로 전파되는 과정
    
    ⇒ SO, 이벤트 버블링 / 캡처링은 상하관계가 있기 때문에 계층적인 구조에서 효율적으로 동작합니다.

Virtual DOM이란?

실제 돔과 같은 내용을 담고 있는 복사본

→ 자바스크립트 객체 형태로 메모리 안에 저장되어 있습니다.

→ 실제 돔안에 있는 모든 요소와 속성들을 가지고 있습니다.

⇒ 브라우저가 아닌 메모리 상에 존재합니다.
브라우저 DOM API로 직접 조작할 수 없습니다.

→ 대신 리액트가 내부적으로 관리합니다. 개발자는 state와 props로 간접적으로 변경을 요청합니다.

가상 돔과 실제 돔의 차이

실제 돔은 브라우저에 있는 문서에 직접적인 접근 OK

→ BUT, 가상돔은 접근 불가능

⇒ 즉, 가상돔은 화면에 보여지는 내용을 직접 수정할 수 없습니다.

구분 실제 DOM Virtual DOM
위치 브라우저 메모리
접근 브라우저 API로 직접 접근 가능 직접 접근/조작 불가
변경 비용 매우 비쌈 매우 저렴

구분	실제 DOM	Virtual DOM
위치	브라우저	메모리
접근	브라우저 API로 직접 접근 가능	직접 접근/조작 불가
변경 비용	매우 비쌈	매우 저렴

그럼 왜 가상 돔을 쓰는 걸까?

실제 돔 조작 과정은 다음과 같습니다.
- 현재 페이지의 html를 탐색
  → 변경할 엘리먼트 찾음
  → 해당 엘리먼트와 자녀 엘리먼트들을 돔에서 제거
  → 새롭게 수정된 엘리먼트들을 교체
  → css 다시 계산
  → 레이아웃 정보를 알맞게 수정
  → 새롭게 계산된 내용에 따라서 브라우저에 다시 그려줌
  
  ⇒ 트리에 있는 정보를 업데이트 시켜주는 것은 그렇게 무거운 작업은 아닙니다.
  
  BUT, 브라우저의 UI를 다시 그리는 작업은 복잡하고 시간이 오래 걸립니다.
  
  ⇒ 근데 매번 이 작업을 반복한다..? === 비효율 그 자체입니다.
리액트는 가상돔을 사용해서 실제 돔 조작 과정을 훨씬 효율적이게 만듭니다.
- 가상돔은 실제 돔과 다르게 직접적으로 화면에 보이는 ui를 조작할 수 있게 해주는 api를 제공하지 않습니다. 가상 돔은 메모리에 저장되어 있는 그냥 자바스크립트 객체에 불과합니다. ⇒ SO, 가상돔을 생성하고 접근하는 것은 아주 아주 가볍고 빠른 작업입니다.
  
  → WHY? 실제 브라우저 화면에 접근하는게 아니니까요.

리액트가 가상돔을 활용하는 방법

리액트는 항상 2개의 가상돔 객체를 가지고 있습니다.
1. 렌더링 이전의 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔
리액트는 state가 변경될 때마다 화면이 새로 렌더링됩니다.

→ 렌더링이 발생할 상황이 생긴다? → 리액트는 바로 새로운 화면에 들어갈 내용이 담긴 가상돔을 생성합니다.

WHEN? 실제 브라우저가 그려지기 이전에!

⇒ 렌더링 이전에 화면의 내용을 담고 있는 첫번째 가상돔과 업데이트 이후의 내용을 담고 있는 두번째 가상 돔을 비교합니다
⇒ AND 정확히 어떤 엘리먼트들이 변했는지 찾습니다!

→ 이러한 과정을 리액트는 Diffing이라고 부릅니다.

Diffing
- 이전 Virtual DOM과 새로운 Virtual DOM을 비교!
- 효율적인 알고리즘으로 변경된 부분만 찾습니다.
  
  ⇒ 리액트는 딱 변경된 부분만 실제 돔에 적용함!
  
  ⇒ 이 과정을 Reconciliation이라고 합니다 === 재조정
Reconciliation
- Diffing 결과를 바탕으로 변경된 부분만 실제 DOM에 적용
- 이 과정에서 리액트는 Batch Update를 사용합니다.
Batch Update란?
- 배치 === 집단 혹은 무리
- 배치 업데이트는 변경된 모든 요소들을 한 번에 묶어서 실제 DOM에 적용하는 방식
  
  → 한 꺼번에 바뀐 모든 부분들을 적용시겨주기 때문에 DOM 조작 횟수를 최소화합니다.
  
  → 돔 조작에서 비용이 많이 드는 작업은 화면을 그려주는 작업(Reflow / Repaint)인데 배치 업데이트가 이를 완전 효율적으로 만들어줍니다. 성능 최적화에 매우 중요합니다.
  
  SO, 리액트의 재조정 과정이 굉장히 효율적인 이유는 바로 Batch Update 때문입니다.

한 줄 요약 정리

DOM

DOM은 자바스크립트가 HTML 문서를 조작할 수 있도록 만든 객체 모델입니다.
Virtual DOM

Virtual DOM은 실제 DOM 구조를 복사한 자바스크립트 객체로, 변경 사항을 계산하기 위한 중간 단계입니다.
왜 Virtual DOM을 쓰나?

DOM 변경 자체보다 Reflow와 Repaint 비용이 크기 때문에, React는 Virtual DOM으로 변경 사항을 최소화합니다.
Diffing

이전 Virtual DOM과 새로운 Virtual DOM을 비교해 변경된 부분을 찾는 과정입니다.
Reconciliation

Diffing 결과를 바탕으로 변경된 부분만 실제 DOM에 적용하는 과정입니다.
Batch Update

여러 변경 사항을 한 번에 DOM에 적용해 성능을 최적화하는 방식입니다.