Virtual DOM

DOM을 수정하는 것은 리소스가 많이 필요하다.

DOM 수정에 따른 성능 저하를 방지하기 위해 DOM을 최소한으로 수정해했고, 그래서 나온 개념이 VIrtual DOM이다.

 

Virtual DOM은 React에서 나온 실제 DOM과 구조가 비슷한 React의 객체 트리이다.

DOM을 직접 수정하지 않고 Virtual DOM을 조작하면 React가 변화된 부분을 적절하게 DOM에 적용시킨다.

Virtual DOM을 사용함으로써 실제 DOM을 조작할 필요가 없어졌다.

웹의 복잡성이 더욱 높아지면서, DOM을 직접 관리하는 것이 복잡하고, 실수의 가능성이 존재했는데, 이러한 부분을 virtual DOM을 통해 자동화하고, 추상화해줌으로써 해소할 수 있다.

 

Virtual DOM은 실제 DOM 변화를 최소화시켜주는 역할을 한다.

virtualDOM을 이용하는 이유는 효율성 때문이다.

virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아진다.

https://programmingwithmosh.com/react/react-virtual-dom-explained/

먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거친다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정 역시 20회 다시 이루어진다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하된다.

Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달한다.

따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한 번의 렌더링 과정만 거치게 된다.

 

이렇게 Virtual DOM과 실제 DOM을 동기화 시키는 과정을 'Reconciliation 재조정)'이라고 합니다.

 

 

# Reference

DOM과 Virtual Dom이란?

 

재조정 (Reconciliation) – React

 

Virtual DOM과 Internals – React