Virtual DOM의 정의
Virtual DOM(가상 돔)은 실제 브라우저의 DOM을 그대로 흉내 낸 ‘가상의 트리 구조’를 메모리 안에 만들어두는 기술입니다. React는 화면을 그릴 때 실제 DOM을 직접 조작하지 않고, 먼저 자바스크립트 객체로 이루어진 가상의 DOM을 만들고 이를 기준으로 변경 사항을 계산합니다. 쉽게 비유하면, 실제 DOM은 ‘완성된 집’이고 Virtual DOM은 ‘설계 도면’입니다. 집을 고칠 때마다 벽을 부수고 다시 세우는 대신, 도면을 먼저 수정해서 어디를 바꿔야 하는지 확인한 뒤 필요한 부분만 공사하는 방식이라고 생각하면 됩니다.
동작 원리: Diffing과 Reconciliation
React에서 상태(state)나 props가 변경되면, React는 새로운 Virtual DOM 트리를 생성합니다. 그리고 이전 Virtual DOM 트리와 새 트리를 비교하는 ‘Diffing’ 과정을 거칩니다. 이 과정에서 실제로 변경된 부분만 찾아내고, 이를 실제 DOM에 최소한으로 반영하는 작업을 ‘Reconciliation(재조정)’이라고 부릅니다.
예를 들어 아래와 같은 리스트가 있다고 가정해봅시다.
- 변경 전:
['사과', '바나나', '포도'] - 변경 후:
['사과', '바나나', '수박']
이때 React는 리스트 전체를 다시 그리지 않고, ‘포도’가 있던 자리만 ‘수박’으로 바꾸는 최소한의 변경만 실제 DOM에 적용합니다. 이 비교와 계산이 모두 메모리상의 가상 객체에서 이루어지기 때문에 매번 브라우저의 실제 DOM에 접근해서 검사하는 것보다 훨씬 빠릅니다.
실무에서 왜 중요한가
실제 DOM을 직접 조작하는 작업은 브라우저 입장에서 매우 비용이 큽니다. 스타일 재계산, 레이아웃(reflow), 화면 다시 그리기(repaint) 같은 과정이 뒤따르기 때문입니다. 만약 데이터가 바뀔 때마다 화면 전체를 다시 그린다면 성능이 급격히 나빠집니다.
Virtual DOM은 이런 비싼 연산을 최소화하기 위한 중간 단계 역할을 합니다. React는 변경 사항을 한 번에 모아서 계산한 뒤, 실제 DOM에는 꼭 필요한 부분만 한꺼번에 반영합니다. 이 덕분에 개발자는 ‘어떤 부분을 어떻게 바꿀지’를 일일이 고민하지 않고, ‘현재 상태가 이렇게 바뀌었다’는 선언만 하면 React가 알아서 효율적으로 화면을 갱신해줍니다.
결국 Virtual DOM은 성능 최적화 도구이자, 개발자가 선언형 코드를 작성할 수 있게 해주는 핵심 장치입니다. 이 개념을 이해하면 React뿐 아니라 Vue 같은 다른 프레임워크의 동작 방식을 이해하는 데도 큰 도움이 됩니다.