Virtual DOM 🖐❗❓

Virtual DOM 이란?

말 그대로 가상 돔이다. 자바스크립트에서는 돔을 직접 조작하여 브라우저에 반영했다. 돔 트리가 수정될 때마다 렌더 트리가 계속해서 갱신되기 떄문에 불필요한 렌더링이 증가됐다.

Virtual DOM은 변화가 있을 떄마다 실시간으로 돔을 수정하지 않고 가상돔에 해당 변경 사항을 반영한다. 그 후 이전 돔과 가상돔을 비교하여, 바뀐 부분만 실제 따라서 기존의 돔과 달리 불필요한 렌더링 횟수가 줄어들게 된다. 달라진 부분만 DOM에게 한 번에 전달하여 딱 한 번만 렌더링을 진행한다

Virtual DOM 작동 원리?

Virtual DOM은 UI 가상 표현을 메모리상에 두고 재조정(Reconciliation) 과정을 통해 실제 DOM과 동기화하는 것을 말한다. 재조정 과정은 크게 3단계로 구성된다.

• UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.
• 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
• 변경된 부분을 실제 DOM에 반영한다.
  

출처
https://ui.toast.com/weekly-pick/ko_20210819
https://www.howdy-mj.me/dom/what-is-dom/