노트

Virtual DOM

Virtual DOM

프론트엔드#react#browser · 연결된 개념 10개

쉽게 말하면

Virtual DOM은 화면이 어떻게 생겨야 하는지 메모리에 적어 둔 가벼운 설계도예요. 상태가 바뀌면 새 설계도와 이전 설계도로 틀린 그림 찾기를 해서, 실제 화면에선 달라진 곳만 고쳐요.

비유의 한계 틀린 그림 찾기도 일이라 Virtual DOM이 무조건 빠른 건 아니에요. 잘 짠 직접 DOM 조작이 더 빠를 수 있고, 진짜 가치는 선언적으로 쓰면 최소 수정 계산을 라이브러리가 맡아 준다는 데 있어요.

Virtual DOM(가상 DOM, Document Object Model)은 화면이 어떻게 생겨야 하는지를 메모리에 적어 둔 가벼운 JavaScript 객체 트리다. React에서는 React 엘리먼트 트리가 그것이다. 상태가 바뀌면 새 트리를 만들어 이전 트리와 비교하고, 달라진 부분만 실제 DOM에 반영한다.

상태 변경 → 컴포넌트 다시 실행 → 새 가상 트리
         → 이전 트리와 비교(diff, reconciliation) → 바뀐 노드만 실제 DOM에 commit
  • 실제 DOM 노드는 레이아웃·스타일·렌더링 엔진과 얽힌 무거운 객체다. 자주 직접 건드리면 리플로우와 리페인트가 반복된다
  • 예: <span>{count}</span>만 바뀌면 React는 그 텍스트 노드 하나만 고친다
  • "Virtual DOM은 무조건 빠르다"는 오해다. 잘 짠 직접 DOM 조작이 더 빠를 수 있다. 진짜 가치는 개발자가 선언적으로 UI를 쓰기만 하면, 실제 DOM을 최소한으로 고치는 계산을 라이브러리가 맡아 준다는 데 있다
  • 엄밀히 말하면 엘리먼트 하나하나는 "현재 렌더 결과"이고, Virtual DOM은 이전·현재 트리와 비교 알고리즘까지 포함한 개념에 가깝다
  • 비교 규칙은 재조정(Reconciliation), 비교를 쪼개서 수행하는 엔진은 Fiber 아키텍처. Svelte처럼 가상 DOM 없이 컴파일 타임에 갱신 코드를 만드는 접근도 있다(Svelte)

책: 10장. 동적 계획법: diff는 어떻게 만들까

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • react와 렌더러의 분리

    React는 컴포넌트를 정의하는 API(Application Programming Interface)를 담은 react 패키지와, 그 컴포넌트 트리를 특정 플랫폼의 화면으로 바꾸는 렌더러(renderer) 패키지로 나뉜다. 브라우저 DOM(Document Object Model)용이 react-dom, iOS·Android 네이티브 뷰용이 react-native다.

  • React Portal

    포털(Portal)은 자식 요소를 부모 컴포넌트의 DOM(Document Object Model) 계층 밖에 있는 다른 DOM 노드에 렌더하는 React 기능이다(createPortal(children, domNode, key?)). DOM 위치만 옮겨지고 React 트리에서의 위치는 그대로다.

  • Vue 3와 React 대응표

    React에 익숙한 개발자가 Vue 3(Composition API, script setup)를 빠르게 읽을 수 있게 짝지어 본 표. 가장 큰 차이는 Vue는 반응성(Reactivity)을 자동으로 추적해서 의존성 배열(Dependency Array)이 없다는 점이다.

  • React의 규칙과 렌더 순수성

    Rules of React는 React가 올바르게 동작하고 최적화하기 위해 코드가 지켜야 하는 규칙으로, 공식 문서가 세 가지로 정리한다. 핵심은 렌더가 순수한 계산이어야 한다는 것이다.

  • React 서버 컴포넌트(RSC)

    React 서버 컴포넌트(React Server Components, RSC)는 서버에서만 실행되고, 컴포넌트 코드가 아니라 실행 결과(직렬화된 엘리먼트 트리)만 클라이언트로 보내는 컴포넌트다. Next.js App Router에서는 'use client'를 붙이지 않은 컴포넌트가 기본으로 서버 컴포넌트다.

보기 옵션