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)한다. 이를 통해 성능을 최적화하고 불필요한 리렌더링을 최소화할 수 있다.
'React' 카테고리의 다른 글
[React] useMemo알아보기! (0) | 2023.05.20 |
---|---|
[React] Diffing 알고리즘 (0) | 2023.05.19 |
[React] - Props/State 제대로 알고가기! (0) | 2023.05.02 |
[Redux] 상태 관리 라이브러리 (0) | 2023.04.24 |
[React] - SPA / React Router 는 무엇인가? (0) | 2023.03.25 |