Virtual DOM

브라우저 DOM을 직접 자주 읽고 쓰면 레이아웃 계산과 화면 갱신 비용이 커지고, 어떤 노드를 재사용할지도 개발자가 직접 관리해야 합니다. UI가 복잡해질수록 이런 수동 패치는 오류와 성능 문제를 동시에 키웁니다.

jQuery 시절에는 특정 선택자를 찾아 필요한 만큼 DOM을 고치는 방식이 일반적이었습니다. 이 방법은 작은 상호작용에는 빠르지만, 상태와 화면 분기가 복잡해질수록 변경 영향을 사람이 모두 계산해야 했습니다. React는 이 부담을 줄이기 위해 렌더 결과를 먼저 계산하고, 나중에 실제 DOM 반영을 최소화하는 모델을 택했습니다.

state나 props가 바뀌면 React는 새 렌더 결과 트리를 계산합니다. 그리고 이전 렌더 트리와 비교해 어떤 요소가 유지되고, 어떤 부분이 바뀌고, 무엇이 삭제되는지 판단합니다. 마지막으로 그 차이만 실제 DOM에 커밋하므로, 개발자는 선언형 코드를 유지하면서도 전체 DOM을 다시 짜지 않아도 됩니다.

Virtual DOM과 ref는 모두 실제 DOM과 닿아 있다는 점에서 엮여 보이지만 목적이 다릅니다. Virtual DOM은 선언형 렌더링을 효율적으로 적용하기 위한 내부 모델이고, ref는 그 흐름 밖에서 특정 DOM 노드나 mutable 값을 직접 다루기 위한 탈출구입니다.

Virtual DOM을 이해하면 key가 왜 중요한지, state 위치가 왜 렌더 범위에 영향을 주는지, 조건 분기에서 컴포넌트 상태가 왜 유지되거나 초기화되는지를 더 잘 설명할 수 있습니다. 다만 이것은 직접 조작하는 API라기보다 React가 내부에서 어떤 판단을 하는지 이해하는 개념으로 보는 편이 맞습니다.