Virtual DOM

React 와 Virtual DOM

 

1. Real DOM(DOM)

- 문서 객체 모델로 브라우저가 JavaScript와 같은 스크립팅 언어가 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것 → 브라우저가 트리 구조로 만든 객체 모델

- 트리 구조로 DOM 객체가 이루어져 있어서 자바스크립트가 쉽게 접근 가능 한 것임!

- UI 상태가 변경될 때 변경 상태를 나타내기 위해 업데이트가 됨 → DOM 조작 정도가 잦다면 렌더링 자주 됨 → 성능 저하 

 

2. Virtual DOM

- Virtual DOM은 Real DOM의 가벼운 사본 개념 

- Virtual DOM은 Real DOM 객체 처럼 화면에 표시되는 내용을 직접 변경하지 않음!

 

2.1 Virtual DOM 조작의 큰 개념 

- Virtual DOM은 가상의 UI 요소를 메모리에 유지 시키고

- 그 가상의 UI 요소를 React DOM과 같은 라이브러리를 통해 Real DOM과 동기화 시킴

 

2.2 Virtual DOM이  Real DOM에 적용되는 과정 

- React는 새로운 요소가 UI에 추가되면 → 트리 구조로 표현되는 Virtual DOM을 만들어 줌!

- 요소 상태가 변경되면 → new Virtual DOM이 만들어 짐

- 이전 가상 DOM과 이후 가상 DOM을 비교!

- 위의 작업이 완료되면 Virtual DOM은 Real DOM에 변경을 수행할 수 있는 최상의 방법을 계산하기 시작 

- 이렇게 하면 Real DOM은 최소한의 작업만 수행해도 렌더링 가능(부분적으로 리렌더링) 

- 이렇게 업데이트 된 트리는 Real DOM에 한꺼번에 업데이트

→ Real DOM의 업데이트 비용 감소 가능 → 브라우저의 파워를 덜 쓴다는 뜻 → 빠른 렌더링 가능

 

3. Virtual DOM의 형태

- 추상화된 자바스크립트 객체의 형태를 가지고 있음

- Real DOM과 마찬가지로 HTML 문서 객체를 기반으로 함

- 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 Real DOM은 건드리지 않고도 필요한 만큼 자유롭게 조작 가능

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"
					}
				]
			]
		}
	]
}