Virtual DOM이란 무엇일까?

 

 

 

1. Virtual DOM이란 무엇일까?

Virtual DOM(가상 DOM)은 React, Vue 등의 같은 라이브러리에서 사용되는 개념으로, 웹애플리케이션의 성능 향상과 효율적인 UI 업데이트를 위한 기술이다. 일반적으로 브라우저는 실제 DOM(Document Object Model)을 사용하여 웹 페이지의 구조를 표현하고 조작하는데, DOM은 HTML 문서의 요소들을 트리 구조로 표현하고, Javascript를 사용하여 동적으로 조작할 수 있다. 그러나 DOM 조작은 비용이 높은 작업 중 하나로, DOM이 직접 변경될 시 사소한 변경사항에도 전체가 리렌더링 되기 때문에 웹 애플리케이션이 복잡해지고 대규모로 확장될수록 성능 문제가 발생할 수 있다.

Virtual DOM은 이러한 성능 문제를 해결하기 위해 도입된 개념이다. Virtual DOM은 메모리에 존재하는 가상의 DOM 트리를 말하며, 이를 사용하여 실제 DOM과의 변경사항을 효율적으로 비교하고 조작한다. 애플리케이션의 상태가 변경될 때마다 먼저 가상 DOM이 업데이트되고, 그 후에 실제 DOM과 비교하여 변경된 부분만을 최소한의 업데이트로 반영한다. 이를 통해 불필요한 DOM 조작을 최소화하고 렌더링 성능을 향상 시킬 수 있는 것이다. 

 

2. Virtual DOM이 동작하는 과정

Virtual DOM은 다음과 같은 과정을 통해 동작한다. 

1) 초기 렌더링

• 초기 렌더링 시에는 실제 DOM이 아닌, 가상 DOM이 생성된다.
• React 엘리먼트의 트리 구조를 반영하는 가상 DOM이 생성되면, 이를 기반으로 실제 DOM에 업데이트를 수행한다.

2) 가상 DOM 업데이트

• React 컴포넌트의 state나 props가 변경되면, React는 새로운 가상 DOM을 생성한다.
• 새로운 가상 DOM은 이전 가상 DOM과 비교(Diffing)된다.

3) Diff 탐지

• 이전 가상 DOM과 현재 가상 DOM을 비교하여 업데이트가 필요한 부분을 찾는다. 이 과정을 Diff라고 한다.

4) 변경된 부분 식별

• 차이를 탐지하고 나면, 변경된 부분을 식별한다.
• 변경된 부분은 이후에 실제 DOM에 업데이트될 예정이다.

5) 가상 DOM 업데이트 적용

• 변경된 부분이 나오면 React는 이를 이용하여 새로운 가상 DOM을 만들고, 이를 실제 DOM에 적용한다.
• 이때, 이전에 발생한 변경 사항을 추적하여 최소한의 작업만을 수행한다.

6) 실제 DOM 업데이트

• 최종적으로 변경된 부분이 실제 DOM에 반영된다.
• React는 변경된 부분만을 업데이트하므로, 성능이 향상되고 불필요한 작업이 최소화된다.

 

이런 Virtual DOM의 사용은 다음과 같은 장점이 있다.

성능 향상

• 전체 DOM을 다시 렌더링하는 대신, 변경된 부분만 업데이트함으로써 성능을 최적화한다.

더 쉬운 상태 관리

• React에서 state를 변경하면 자동으로 Virtual DOM이 업데이트되기 때문에, 개발자가 직접 DOM을 조작하는 것에 비해 상태 관리가 편하다.

크로스 브라우징 문제 완화

• React가 크로스 브라우징 문제를 처리하면서 개발자가 일일이 신경 쓸 필요가 없게 된다