가상 DOM과 재조정 과정의 역할은 무엇인가요?

실제 DOM을 직접 조작하는 일은 비용이 큽니다. 레이아웃 계산·리페인트가 자주 일어나기 때문입니다. 리액트는 가상 DOM(Virtual DOM) 이라는 가벼운 자바스크립트 객체로 UI를 표현하고, 변경이 필요한 부분만 실제 DOM에 반영해 이 비용을 줄입니다.

가상 DOM이란

가상 DOM은 실제 DOM 노드를 흉내 낸 순수 자바스크립트 객체 트리입니다. JSX는 React.createElement 호출로 변환되어 이런 객체를 만듭니다.

// JSX
const el = <h1 className="title">안녕</h1>;
 
// 변환 결과(개념적으로)
const el = {
  type: 'h1',
  props: { className: 'title', children: '안녕' },
};

상태가 바뀌면 리액트는 새 가상 DOM 트리를 만들고, 이전 트리와 비교해 무엇이 달라졌는지만 골라 실제 DOM에 적용합니다.

재조정 (reconciliation)

재조정은 이전 가상 DOM 트리와 새 트리를 비교(diffing)해, 실제 DOM에 적용할 최소한의 변경을 결정하는 과정입니다. 트리 전체를 정확히 비교하면 비용이 크기 때문에, 리액트는 두 가지 휴리스틱으로 비교를 빠르게 만듭니다.

1. 타입이 다르면 통째로 교체 — 엘리먼트 타입(div → span)이 바뀌면 그 아래 트리를 비교하지 않고 새로 만듭니다.
2. key로 자식을 식별 — 리스트의 각 자식에 key를 두면, 항목이 이동·추가·삭제됐는지 효율적으로 판단합니다.

Fiber와 동시성

리액트 16부터는 Fiber 아키텍처로 재조정 작업을 잘게 쪼개, 작업을 중단했다가 재개할 수 있습니다. 덕분에 리액트 18의 동시성 기능처럼 긴 렌더링이 메인 스레드를 막지 않도록 우선순위를 조절할 수 있습니다.

가상 DOM은 “DOM 조작을 무조건 빠르게 해 주는 마법”이 아니라, 직접 명령형으로 DOM을 다루는 복잡함을 선언형 코드로 바꿔 주는 추상화라는 점을 기억하면 좋습니다.