DOM(Document Object Model)은 HTML 문서의 구조를 표현하는 객체 모델이다.
웹 페이지에서 사용되는 HTML 태그들은 DOM으로 변환되어 메모리에서 다뤄지며,
페이지의 콘텐츠나 구조를 프로그래밍적으로 수정하고 관리가 가능하다.
Virtual DOM(가상 돔)은 실제 DOM의 가벼운 복제본이라고 볼 수 있다.
상태 변화가 발생하면, 먼저 Virtual DOM에 변경사항을 적용 해보고,
그 후 실제 DOM과 비교하여 효율적인 변경을 실제 DOM에 반영한다.
이러한 방식은 성능 최적화, 렌더링 속도를 높일 수 있다고 한다.
내가 웹 페이지 입력 폼에 데이터를 입력하는 상황이라고 가정 해보자.
그에 따른 데이터를 변경할 때 마다 실제 DOM을 갱신하게 된다면 매 순간
전체 페이지가 렌더링 될 수 있다. 이 때 가상 DOM을 사용하게 된다면
실제 DOM의 변화가 필요할 때만의 최소한의 업데이트가 이루어짐으로써
효율적으로 변경사항을 반영할 수 있다. 관련하여
추가적으로 Vue의 리액티브 시스템에 대하여 알게 되었는데,
간단하게 리액티브 시스템은 데이터 변화를 자동으로 감지하고,
이를 가상 DOM을 통해 효율적으로 처리하여 UI 업데이트를 최적화 한다.
간단하게 데이터와 UI가 자동으로 동기화 되는 방식이라고 한다.
결론,
DOM은 웹 페이지의 구조를 프로그래밍적으로 다루기 위한 모델이고,
가상 DOM을 활용하여 성능을 크게 향상시킬 수 있다.
