노트

Virtual DOM

Virtual DOM

프런트엔드#react#browser · 연결된 개념 9개

쉽게 말하면

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)

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • React Portal

    포털(Portal)은 자식 요소를 부모 컴포넌트의 DOM(Document Object Model) 계층 밖에 있는 다른 DOM 노드에 렌더하는 React 기능이다(createPortal(child, container)). 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'를 붙이지 않은 컴포넌트가 기본으로 서버 컴포넌트다.

  • Effect가 필요 없는 경우

    Effect는 외부 시스템과 동기화할 때 쓰는 탈출구(Escape Hatch)다. 렌더 중에 계산할 수 있는 값이나 사용자 이벤트 처리에 Effect를 쓰면 렌더가 한 번 더 일어나고 흐름이 꼬인다. React 공식 문서가 이런 경우를 따로 정리해 두었다.

보기 옵션