[frontend] virtual dom 이란?

1. virtual dom 등장배경

[DOM이란?]

Document Object Model

웹페이지에 들어가 있는 html 엘리먼트들을 트리 형태의 구조로 표현한것

 

[브라우저 렌더링 과정]

1. DOM tree생성

:개발자가 작성한 HTML을 브라우저가 전달 받음 ⇒ 브라우저의 렌더 엔진이 이를 파싱

 

2.Render tree 생성

: css파일과 각 엘리먼트의 lnline 스타일을 파싱 스타일 정보 추가

 

3.Layout

: 각 노드들은 스크린 좌표가 주어지고, 정확히 어디에 위치해야할지 정해짐

 

4.Painting

: [1-3]번 과정에서 얻은 정보들로 모든 요소들에 색을 입히는 과정

: 이후 화면에 UI 렌더

 

why? 브라우저 렌더링 살펴본 이유

: DOM 조작의 비효율성을 이해하기 위해서!

 

P1) 성능저하

돔의 변화가 발생하면 ⇒ render tree가 그때마다 재생성됨

변화 발생시 모든 요소들의 스타일 다시계산, 레이아웃 리패인트까지 과정 다시 반복됨!

 

[전체 노드들이 처음부터 다시 그려짐]

: 시간이 많이 드는 소모적인 과정

 

P2 )

SSR) 서버에서 데이터와 함께 완전한 페이지를 렌더해주는 방식

dom의 동적인 변화가 큰 문제가 없었음!

 

CSR) SPA를 많이 사용하면서 dom tree 즉각적으로 많이 변경할 일이 생김

dom 업데이트가 복잡하게 발생

 

dom 조작을 통해 화면을 렌더링하는 과정의 비효율성을 해결 및 최적화 할 필요성이 대두

: virtual dom이 등장함!

 

---

2. 그래서 virtual dom이란?

[ virtual DOM]

: 기존 dom의 친구

: 가벼워진 복사본 [살뺀버전] 이유) real dom과 같은 class, style 속성  ⭕️

DOM api 속성 ❌ 

 

: 메모리에 존재하는 가상의 구조, 직접 화면에 렌더링❌

(화면에 변화를 직접 줄 수 있는 기능인 getElementById등과 같은)

 

[virtual DOM 동작방식 특징]

• 실제 DOM 리렌더링에 비해서 효율적
• html 객체에 기반한 js 객체로 표현 가능

:평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작 가능

 //실제 HTML 문서를 자바스크립트 객체 형태
 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이 아닌 메모리 상에서 동작 (훨씬 더 빠르게 동작)

 

• 실제 렌더링 X → 연산 비용 적음

:요소가 30개 바뀌었다고 레이아웃 30개씩 새로 하는 것이 아니라

모든 변화를 하나로 묶어서 딱 한번만 실행시킴

---

3. React의 virtualdom이란?

REACT

: virtual dom 이용하는 대표적인 js 라이브러리

 

리액트 공식문서

 

재조정: virtual dom과 실제 dom을 비교하고 일치시키는 과정

 

[virtual DOM이 실제 DOM 트리에 적용되는 과정]

 

[react에서 2개의 가상돔 존재!!]

1. 렌더링 이전: 화면 구조를 나타내는 가상돔
2. 렌더링 이후 보이게 될 : 화면 구조를 나타내는 가상돔

[Dom]

:노란색 원들은 업데이트된 노드, 즉 UI 요소를 의미 [ React에서는 “상태가 변경된” UI 요소]

:트리가 업데이트된 UI를 제공하기 위해 부분적으로 리렌더링

:실제 DOM으로 한꺼번에 업데이트

 

[diffing]: 효율적인 알고리즘

정확히 어느 엘리먼트들이 변경되었는지 굉장히 빠르게 파악함

 

1.리액트 state가 변경될때마다 화면이 새로 렌더링

2.렌더링이 발생 될 상황에 놓일때마다 새로운 화면에 들어갈 내용이 담긴 가상 돔을 생성

3.이후 렌더링 이전에 화면의 내용을 담고 있는 첫번쨰 가상 돔과 업데이트 이후의 내용을 담고 있는 두번째 가상 돔을 비교해서 정확히 어느 엘리먼트 들이 변했는지 찾아냄

4.바뀐 엘리먼트 파악한 다음에 리액트는 딱 그 바뀐 부분들만 실제 돔에 적용

 

재조정 과정이 효율적인 이유? Bach Update때문!

변경된 모든 엘리먼트들을 집단으로 실제 돔에 한번에 적용시켜 주는것!

---

4. 그럼 virtual dom이 무조건 빠른가? 무조건 좋은가??

:만드는 프로젝트에 따라 virtual dom 사용하기

 

만약! 정보 제공만 하는 웹페이지라면 인터랙션이 발생하지 않기 때문에

일반 DOM의 성능이 더 좋을수도!!

 

SPA로 제작된 큰 규모의 웹 페이지에서는 Virtual Dom을 사용해서 브라우저의 연산 양을 줄여

성능을 개선할 수 있다!