[FE] Virtual DOM

DOM

Document Object Model

문서의 구성요소들을 객체로 구조화하여 나타낸 것

프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작

주로 JS에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용

• 트리구조
  DOM은 트리구조로 표현되며, 각 노드는 웹 페이지의 다양한 요소들을 나타냄
• 라이브 특성
  DOM에 대한 변경은 즉시 웹 페이지에 반영
• 조작 가능
  API를 사용해서 DOM 요소를 선택, 수정, 추가 또는 제거 가능
  => 해당 과정을 DOM 조작이라고 부름

Q. DOM에 대한 변경이 즉시 웹 페이지에 반영하려고 브라우저가 화면을 다시 그리면 리플로우와 리페인트에 대한 비용이 너무 많이 발생하지 않을까...? 리플로우와 리페인트가 기억나지 않는다면?

Virtual DOM

실제 DOM에는 브라우저가 화면을 그리는데 필요한 정보들이 포함, DOM 조작 작업은 굉장히 무거움...

그래서 실제 DOM에 바로 수정하는 것이 아닌 내부적으로 가상 DOM을 만들어서 관리

여기서 DOM과 유사한 역할을 담당하는 비교적 가벼운 객체를 메모리에 만들어 놓는데 해당 객체가 Virtual DOM

동작 원리

Virtual DOM은 변화를 감지하면 재조정 과정을 통하여 실제 DOM과 동기화

재조정은 크게 3단계로 나뉨

1. UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링
   => 실제 화면상 렌더링 되는 것이 아닌 비교를 위한 가상 렌더링
2. 현제 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산
3. 변경된 부분을 실제 DOM에 반영
   => 변경된 부분만 렌더링을 함

DOM은 실제 브라우저 화면을 그리기 때문에 조작 속도가 느리지만, Virtual DOM은 실제로 브라우저 화면에 그리는 것이 아니기 때문에 조작 속도가 훨씬 빠름

Virtual DOM을 꼭 사용해야 하는가?

사실 Virtual DOM이 모든 상황에서 더 좋은 성능을 이끌어 내지는 않음

만약 규모가 작고 정적인 웹 어플리케이션이라면 굳이 메모리를 더 소모하는 Virtual DOM보다 DOM만 사용하는 것이 성능이 더 좋음

다만, 요즘 트랜드에는 Virtual DOM이 더 적격인게 사실

최근 트랜드인 SPA에서는 DOM 조작이 굉장히 빈번하게 발생하며, 그 변화에 적용하기 위해서는 Virtual DOM을 사용하는게 좋음

=> 결국 이것도 상황에 따라 다르다는 사실