📚 Reference

• 공식 문서 1
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3

📜 Chapter

Virtual DOM - Vue.js

‣

Virtual DOM

• Virtual DOM
• 가상 DOM
• Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 엘리먼트를 메모리 내에서 구현한 것이다.
• 컴포넌트가 다시 렌더링될 때, virtual DOM은 업데이트할 요소의 목록을 만들기 위해 기존의 DOM 모델에서 변경되는 사항을 비교한다.
• DOM 전체를 다시 렌더링할 필요 없이 실제 DOM에 필요한 최소한만 변경하여 효율성이 높다는 것이 큰 장점이다.

Virtual DOM - 동작 원리

• Virtual DOM은 UI 가상 표현을 메모리상에 두고 재조정(Reconciliation) 과정을 통해 실제 DOM과 동기화하는 것을 말한다.
• 재조정 과정은 크게 3단계로 구성된다.
  1. UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.
  2. 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
  3. 변경된 부분을 실제 DOM에 반영한다.

Virtual DOM - 장점