• 썼을 때의 장점
• 브라우저의 동작 원리

💬 Answer

🌏 브라우저 동작 원리

지난번에 한번 정리를 했었기 때문에 간단하게 요약만 하고, 넘어가보자.

1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다.
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.
3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.
5. 개별 노드를 화면에 페인트합니다.

🌏 Virtual DOM

👉 DOM이란?

DOM은 Document Object Model로 객체릍 통해 구조화된 문서를 표현하는 방법입니다.
트리형태로 되어 있어 특정 node를 찾거나 수정,제거가 가능합니다.
브라우저의 동작은 레이아웃을 구성(reflow)하고, 색상변경등(repaint)하는데서 속도가 느려집니다.
이런 DOM작업을 가상화하여 미리 처리한 다음 한꺼번에 적용하는 방법이 Virtual DOM.

👉 Virtual DOM

DOM을 추상화한 가상의 객체. (실제 DOM의 가벼운 사본)
DOM의 상태를 메모리에 저장하고 변경전과 후의 상태를 비교 한 후에 최소한의 내용만 반영.
가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고 DOM의 변경이 있을때만 변경을 반영

👉 장점

DOM에 변화가 생기게 되면
Render Tree를 다시 만들고, 다시 Layout 단계를 거치고, Painting단계를 마치며 브라우저에 적용.
SPA(Single Page Application)의 경우 DOM 조작이 많이 발생하는데 이렇게되면 위 동작이 수십번 반복된다.
=> 변화를 적용하기위해 브라우저가 많이 연산해야한다는 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.

Virtual DOM은 Virtual DOM에 먼저 그리고, 변화가 생기면 변경을 반영한다고 하였다.
이렇게 되면 수십번의 반복과정을 거치지않고, 레이아웃 계산 및 리렌더링 규모가 커지긴 해도 단 한번의 동작으로 적용시키는 것이고 연산의 횟수를 줄이는 것이다.

연산횟수 줄이는 동작은 DOM fragment에 변화를 묶어 적용한다음 DOM에던져주면 Virtual DOM에 던져 주면된다.
하지만!
이 걸 우리가 직접한다면 어떤게 바뀌고, 바뀌지 않았는지 계속 파악하고있어야하는데, VirtualDOM이 이걸 자동으로 해준다.

DOM 관리를 VirtualDOM이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용하지 않아도되고, 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는거죠.

👉 정리

Virtual DOM은 DOM을 추상화한 객체로 DOM의 상태를 먼저 저장해 두고, DOM에 변경이 있을 때만 변경한다.
이를 사용함으로써 DOM의 변경이 일어날 때마다 DOM을 다시 그리는 연산횟수를 줄일 수 있고,
어떤게 변경되고 되지않았는지를 자동으로 파악해주는 장점이 있다.

📘 참고

https://jw910911.tistory.com/41
https://velog.io/@sangminnn/Why-Virtual-DOM