Virtual DOM 왜 리액트에서 이걸 쓸까?

Virtual DOM 왜 리액트에서 이걸 쓸까?

DOM이란?

HTML과 상호작용하는 API를 말한다.

ID, <태그> 노드와 트리 형태로 나타내는 게 DOM이다.( 말 그대로 트리처럼 보인다고 트리구조임)

HTML은 DOM이 아니다.

브라우저의 작동과정

 

1) DOM Tree 생성 - 브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱 해서 노드 트리 생성

2) Render Tree 생성 - 스타일(CSS 등) 속성 참조하여 DOM 트리에 따라 새로운 트리, 렌더 트리를 만듭니다.

3) Layout(reflow) - 좌표가 주어진다.

4) Painting - 랜더링된 값에 색을 입힌다. 각 노드를 거쳐 paint 메서드 호출

 

문제가 되는 상황?

복잡해지는 구조입니다. 

 DOM에 변화생기면, 렌더 트리를 재생성하고 (그러면 모든 요소들의 스타일이 다시 계산합니다.)

사소한 것도 반복된다면 비효율적이쥬?

 

그래서 Virtual DOM이 있는 것이랍니다.

먼저 가상의 DOM을 적용하고 최종적으로 실제 DOM으로 전달하며  DOM 조작의 연산 비용을 줄여 성능을 개선한 것입니다.

 

만약 Virtual DOM이 없었다면 사소한 변경사항에도 다 변하기 때문에 변경된 사항 일부만 변경

= 우리가 할 수 있지만 VIrtual DOM이 자동화와 추상화해줌

사실 후자로 우리가 하는 게 더 빠르지만 개발자 비용을 쓰는 것보다 적게 들어서 사용한다.

 

 

조금 더 깊게 알고 싶다면 여기 출처로 들어가 읽어주세요!

https://web.dev/howbrowserswork/