React의 Virtual DOM

e-pong:)·2022년 11월 25일
0

Real DOM(DOM)

DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델이다.
문서 객체란 브라우저가 JavaScript와 같은 스크립트 언어가 ,,와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨것을 의미한다.
즉, DOM은 브라우저가 트리 구조로 만든 객체 모델이다.

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

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

DOM이 변경되고 업데이트가 된다는 것은 결국 브라우저가 렌더링 엔진 또한 리플로우하다는 것을 의미합니다. 즉, 업데이트 된 요소와 그에 해당하는 자식 요소들에 의해 DOM 트리를 재구축함으로써 재랜더링 과정을 거쳐 UI를 업데이트 하게 된다. 브라우저의 리플로우와 리페인트 과정은 다시금 레이아웃 및 페인트에 해당하는 재연산을 하기 때문에 속도가 그만큼 느려지게 된다.


예를 들어 6개의 컨텐츠 중 단 1개의 컨텐츠만 색상이 바뀌는 동작을 한다고 가정할 때, 자바스크립트 프레임워크는 1개의 컨텐츠만 색상을 바꿔 그릴뿐만 아니라 나머지 컨텐츠도 다시 그립니다.
계속해서 이런 비효율적인 업데이트를 반복한다면 극단적인 예로 프레임 드랍(frame dro)과 같은 치명적인 UX 문제가 발생할 수 있다.

결국 "바뀐 부분만 비교해서 그 부분만 랜더링 할 수 없을까?" 라는 아이디어를 기반으로 React는 Virtual DOM이 등장하게 된다.

Virtual DOM

React에는 모든 DOM 객체에 대응하는 가상의 DOM 객체가 있다. 가상 DOM 객체는 실제 DOM 객체와 동일한 속성을 가지고 있음에도 "훨씬 가벼운 사본"이라고 표현 할 수 있다.
다만 가상 DOM 객체는 화면에 표시되는 내용을 실제 DOM 객체처럼 직접 변경하는 것은 아니다.
가상의 UI요소를 메모리에 유지시키고, ReactDOM과 같은 라이브러리를 통해 실제 DOM과 동기화 시킨다.
React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.

가상 DOM이 더 빠른 이유?

새로운 요소가 업데이트 되면 가상의 DOM 트리가 만들어진다. 그리고 이전의 가상의 DOM과 이후의 DOM의 차이를 비교하여 변경 된 부분만 랜더링하게 한다. 따라서 실제 DOM의 업데이트 비용을 줄이게 되는 것이다.

업데이트 비용을 줄일 수 있다는 것은 브라우저의 파워를 덜 쓴다는 의미로, 더 빠른 렌더링이 가능해진다.

Virtual DOM의 형태

가상 DOM은 추상화된 자바스크립트 객체의 형태를 가지고 있다.

이 DOM 트리는 JavaScript 객체로도 표현할 수 있습니다.

const vDom = {
	tagName: "html",
	children: [
		{ tagName: "head" },
		{ tagName: "body",
			children: [
				tagName: "ul",
				attributes: { "class": "list"},
				children: [
					{
						tagName: "li",
						attributes: { "class": "list_item" },
						textContent: "List item"
					}
				]
			]
		}
	]
}

실제 DOM과 마찬가지로 가상 DOM 또한 HTML 문서 객체를 기반으로 한다.
또한 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작할 수 있다.

profile
말에 힘이 있는 사람이 되기 위해 하루하루, 성장합니다.

0개의 댓글