108. Virtual DOM, 가상 돔 이란? TIL 23.01.06

---

 

DOM(Document Object Model)

웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것

DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다.
Web Document에 있는 각 UI요소에 대한 노드가 포함된다.
웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다.

문제점
DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다.
매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지는 문제점이 있다.

이 문제점을 해결하기 위해서 가상돔(Virtual DOM)이 나왔다.

 

 

Virtual DOM(가상 DOM)

가상 DOM이란 DOM을 가볍게 만든 JavaScript 표현이라고 할 수 있고 주로 React, Vue.js 그리고 Elm에 사용된다.
가상 DOM은 실제로 스크린에 랜더링 하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다.

가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다.
해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트조립품처럼 다루는 개념이다.

 

가상돔을 반영하는 절차

그림을 그리다가 마음에 안들면 그냥 찢어서 버리는 것이 아닌
지우개로 고칠 부분만 고치는 것 이게 가상돔과 비슷한 개념이다.
1.  변경된 사항이 있으면 UI를 가상돔에 리렌더링 한다.
2. 가상돔끼리 비교하고(diffing 알고리즘)
3. 바뀐 부분만 실제 DOM에 반영한다.(레이아웃계산은 한 번만)

 

 

DOM과 Virtual DOM 비교

	DOM	Virtual DOM
업데이트	느림	빠름
HTML 업데이트 방식	HTML을 직접적으로 업데이트	HTML을 직접적으로 업데이트 하지 않음
새로운 element 업데이트 방식	새로운 element가 업데이트된 경우 새로운 DOM생성	새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트
메모리	메모리 낭비가 심함	메모리 낭비가 덜함