1. Virtual DOM(가상 DOM)이란 무엇인가?
Virtual DOM은 쉽게 말해 실제 브라우저 DOM의 '가벼운 복사본' 혹은 '설계도'라고 할 수 있다.
웹 페이지를 구축하는 실제 DOM(Document Object Model)은 HTML 요소들을 트리 구조로 표현한 객체이다. 하지만 리액트는 이 실제 DOM을 직접 조작하는 대신, 메모리상에 존재하는 자바스크립트 객체 형태의 가상 DOM을 먼저 만든다.
2. Virtual DOM 작동 원리
- 초기 렌더링 (Initial Render): 앱이 처음 실행될 때 리액트는 최초의
Virtual DOM트리를 만들고, 이를 바탕으로 실제 브라우저 화면(DOM)을 그린다. 이때의Virtual DOM은 '이전 상태'로 메모리에 기억된다. - 상태 업데이트 (State Update): 사용자의 클릭이나 데이터 요청 등으로 컴포넌트의 상태(State)가 변경되면, 리액트는 새로운 화면 구조를 담은 '새로운
Virtual DOM트리'를 메모리에 생성한다. - 비교 (Diffing): 새로운
Virtual DOM과 기억해 둔 이전Virtual DOM을 비교하여 정확히 어느 노드가 달라졌는지 차이점을 아주 빠르게 찾아낸다. - 실제 DOM 적용 (Patching): 차이점 파악이 끝나면, 찾아낸 최소한의 변경 사항들만 모아서 실제 브라우저 DOM에 한 번에 적용한다.
3. Virtual DOM을 사용하는 이유
Virtual DOM을 사용하는 가장 큰 이유는 '성능 최적화'와 '개발의 편의성' 때문이다.
1) 압도적인 성능 최적화 (Batch Update)
실제 DOM을 조작하는 작업 자체는 생각보다 무겁지 않지만, DOM이 변경될 때마다 브라우저가 화면의 구조를 다시 계산(Reflow)하고 색을 다시 칠하는(Repaint) 과정이 매우 큰 비용을 소모한다.
Virtual DOM은 여러 번의 상태 변화가 일어나도, 이를Virtual DOM에서 먼저 한 번에 모아서 계산한다. 그 후 실제 DOM과 비교하여 최종적으로 바뀐 부분만 단 한 번 실제 화면에 업데이트(Patch) 한다. 이를 통해 불필요한 브라우저 렌더링 연산을 최소화하여 성능을 최적화한다.
2) 선언적 UI로 개발의 편의성 향상
Virtual DOM을 사용하면, 개발자는 UI의 현재 상태를 선언적으로 정의할 수 있다. 덕분에 개발자는 "DOM을 어떻게(How) 변경할지" 일일이 고민할 필요가 없어진다.
-
"버튼을 누르면 A 태그를 찾아서 빨간색으로 바꾸고 텍스트를 수정해 줘"라고 복잡하게 명령하는 대신, "버튼이 눌린 상태면 그냥 빨간색 텍스트 화면을 보여줘"라고 결과(What)만 선언하면 된다. 나머지는 리액트의
Virtual DOM이 알아서 계산하고 반영해 준다. -
Virtual DOM을 사용하면 복잡한 DOM 조작 로직을 작성하지 않아도 된다. 이는 코드의 가독성을 높이고, 유지보수를 용이하게 한다.
3) 크로스 플랫폼 호환성
Virtual DOM은 실제 브라우저 환경에 종속되지 않은 순수한 자바스크립트 객체이다. 이 덕분에 웹 브라우저(React DOM)뿐만 아니라, 모바일 앱(React Native) 등 다양한 환경에서 동일한 로직과 원리로 UI를 그려낼 수 있다.
4. 실제 DOM vs Virtual DOM
| 구분 | 실제 DOM | Virtual DOM (가상 DOM) |
|---|---|---|
| 정의 | 브라우저가 화면을 그리기 위한 실제 객체 트리 | 실제 DOM의 구조를 모방한 가벼운 JS 객체 |
| 업데이트 속도 | 느림 (Reflow, Repaint 발생) | 매우 빠름 (메모리상에서만 연산) |
| 화면 렌더링 | DOM이 조작될 때마다 즉시 화면 갱신 | 변경 사항을 모아 최종적으로 한 번만 갱신 |
| 비용(Cost) | 높음 | 낮음 |
