[React] Virtual DOM

Virtual DOM 이란?

Virtual Dom은 Real DOM 의 가벼운 사본과 같다. 

JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적하는 기술

 

Real DOM

DOM 은 Document Object Model의 약자로, 문서 객체 모델을 의미한다. 

DOM 은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. 

 

DOM 의 조작 속도가 느려지는 이유?

DOM 은 계층적 형태의 트리 구조로 구성되어 있다. 자료구조 중에서도 특히 트리는 "데이터 저장"의 의미보다는 "저장된 데이터를 더 효과적으로 탐색" 하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있다. 

• 트리 구조로 된 DOM은 JavaScript와 같은 스크립팅 언어가 접근하고 탐색하는 속도가 빠르기 때문에 변경 및 업데이트 속도 또한 빠르다고 할 수 있다.
• 그러나 DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저의 렌더링 엔진 또한 리플로우 (Reflow)한다는 것을 의미한다.

자료출처 코드스테이츠

 

위 그림은 브라우저의 렌더링 과정을 나타내고 있다. 

 

브라우저는 렌더링 과정에서 DOM 트리와 CSSOM 트리를 토대로 Render 트리를 생성하고 각 요소가 배치될 공간을 계산(Layout) 한 뒤 이를 화면에 그려낸다.(Paint)

• DOM 이 변경된다면 업데이트된 요소와 그에 해당하는 자식 요소들에 의해 DOM 트리를 재구축한다.
• 그 과정에서 리플로우(Reflow) , Repaint 과정을 거치게 된다.
• 이때 변화가 필요 없는 부분도 변경되면서 잦은 리플로우 발생으로 인해 성능을 떨어뜨리는 문제를 야기하게 되었다.
• JavaScript를 통한 DOM 조작이 많아질수록 이에 대한 리플로우가 발생하므로 DOM 업데이트 비용이 커질 수 있다.

 

Virtual DOM 의 동작과정

자료출처 코드스테이츠

리액트는 상태를 변경하는 작업(e.g. 이벤트)이 일어났을 때, 가상 DOM 에 저장된 이전 상태와 변경된 현재 상태를 비교한다.

 

비교 과정에서 React는 Diffing 알고리즘을 사용하여 변경된 부분을 감지한다. 따라서 React에서 상태를 변경하는 경우에는 Diffing 알고리즘에서 감지할 수 있도록 직접 할당이 아닌 setState와 같은 메서드를 활용해 상태를 변경한다.

 

자료출처 코드스테이츠

 

그리고 가상 DOM과 변경된 새로운 가상 DOM을 비교하여 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트한다. 이것을 Reconciliation, 즉 재조정이라고 한다.

 

이 과정에서 여러 개의 상태 변화가 있을 경우 이를 일일이 수행하지 않고 일괄적으로 한 번에 업데이트(Batch Update)한다. 이를 통해 성능을 최적화하고 불필요한 리렌더링을 최소화할 수 있다.