Virtual DOM 훑어보기

Virtual DOM이란?

Virtual DOM은 "가상의 문서 객체 모델"을 의미한다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 트리 형태의 데이터 구조로 이루어져 있는데, Virtual DOM은 이 DOM의 가벼운 복제본이라고 볼 수 있으며, 메모리 내에 존재하므로 실제 DOM보다 빠르게 조작할 수 있다.

 

작동 방식

1. 추상화된 DOM 표현: Virtual DOM은 메모리 내에서 실제 DOM의 트리 구조를 추상화하여 표현한다. 각 노드는 JavaScript 객체로 표현되며, 실제 DOM에 직접적인 영향을 주지 않는다.
2. 변화 감지: 사용자 상호작용이나 데이터 변경으로 인해 UI가 변경될 때마다 새로운 Virtual DOM 트리가 생성된다. 이 새 트리는 이전 Virtual DOM 트리와 비교되어 어떤 부분이 변경되었는지를 파악한다. 이를 'diffing' 또는 'reconciliation'이라고 한다.
3. 최소한의 변경: 위에서 언급한 'diffing' 과정을 통해 실제로 변경된 부분만을 파악한 후, 실제 DOM에는 그 변경사항만을 반영한다. 이로 인해 불필요한 DOM 업데이트가 줄어들어 성능이 향상된다.
4. 배치 업데이트: Virtual DOM은 여러 변경사항을 한꺼번에 모아서 실제 DOM에 한 번에 반영한다. 이 방식 덕분에 여러번의 작은 업데이트가 아닌 한 번의 큰 업데이트로 처리될 수 있다.

 

사용 이유

1. 효율적인 업데이트: Virtual DOM은 UI의 현재 상태와 새로운 상태 간의 차이점(diff)만을 실제 DOM에 반영한다. 이를 통해 불필요한 DOM 조작을 줄여 성능을 향상시켜 준다.
2. 배치 처리: 여러 변경사항을 한번에 모아서 처리함으로써, 매번 작은 변경사항이 발생할 때마다 실제 DOM을 업데이트하는 비효율성을 줄여준다.
3. 개발의 단순화: 개발자는 UI의 최종 상태만을 명시적으로 정의하면 되고, 내부적으로 어떻게 최적의 방법으로 DOM이 업데이트 되는지에 대해서는 신경 쓸 필요가 없어진다.
4. 종속성 없는 UI 테스팅: Virtual DOM은 메모리상에서 독립적으로 작동하므로, 실제 브라우저 환경 없이 UI 로직을 테스트할 수 있다.
5. 향상된 사용자 경험: 불필요한 DOM 업데이트가 줄어들면 페이지의 반응성이 향상되어 사용자에게 더 빠르게 응답할 수 있게 된다.

 

DOM과의 차이

물리적 저장소

• 기본 DOM: 웹 페이지를 나타내는 실제 구조이다. DOM은 브라우저에 의해 해석되고 렌더링 된다.
• Virtual DOM: 메모리 상에 존재하는 가상의 DOM 을 일컫는다. 실제 브라우저 DOM과 동기화하는 데 사용된다.

 

변경 방식

• 기본 DOM: DOM 요소가 변경될 때마다 직접적으로 갱신된다. 이러한 갱신은 비용이 크게 들 수 있다. 예를 들어, 리스트의 중간에 요소를 삽입하는 경우, 그 이후의 모든 요소들을 업데이트해야 할 수 있다.
• Virtual DOM: 변경사항이 발생하면, 새로운 Virtual DOM 트리가 생성된다. 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 반영한다.

 

성능

• 기본 DOM: DOM의 직접 조작은 상대적으로 느릴 수 있는데, DOM을 직접 조작할 경우 불필요한 렌더링과 브라우저의 리플로우나 리페인트가 발생할 수 있기 때문이다.
• Virtual DOM: 변경사항을 한꺼번에 모아서, 최적화된 방식으로 실제 DOM에 반영하기 때문에, 성능상의 이점이 있을 수 있다.

 

직접 조작

• 기본 DOM: JavaScript의 document.getElementById()와 같은 메서드를 사용하여 DOM을 직접 조작할 수 있다.
• Virtual DOM: 대체적으로 특정 React같은 라이브러리나 프레임워크 내부에서 작동한다. 개발자는 Virtual DOM을 직접 조작하는 것이 아니라, 해당 프레임워크의 API를 통해 상태와 UI를 정의한다.

 

용도

• 기본 DOM: 웹 페이지의 구조를 브라우저에서 렌더링하는 데 사용된다.
• Virtual DOM: UI의 상태 변화를 최적화하고, 변경사항을 효율적으로 실제 DOM에 반영하는 데 사용된다.