DOM (Document Object Model)

• 개념
  • 웹 페이지의 구조를 표현하는 객체 모델이다. 웹 페이지의 각 요소(HTML 태그, 속성, 텍스트 등)는 DOM 트리 형태로 구성된다.
  • HTML 문서를 프로그래밍적으로 접근하고 수정할 수 있게 해주는 인터페이스를 제공한다. 이는 웹 페이지의 요소를 동적으로 변경하거나 추가하는 작업을 가능하게 하낟.
• 구성
  • 트리 구조로 구성되며, 각 노드는 HTML 문서의 요소를 나타낸다. 예를 들어 <div>, <p>, <a> 등의 태그가 각각의 노드로 표현된다
  • DOM 트리는 부모-자식 관계를 통해 요소 간의 계층 구조를 나타낸다
• 작동 방식
  • 사용자가 웹 페이지와 상호작용하면, Javascript를 통해 DOM을 조작할 수 있다. 이때, DOM은 실시간으로 업데이트되며, 이러한 변화는 웹 페이지에 직접 반영된다.

Virtual DOM

• 개념
  • 실제 DOM의 가벼운 복사본이다. 주로 React와 같은 라이브러리에서 사용되며, 실제 DOM의 변경을 최소화하기 위해 고안되었다.
  • 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장 되어 있다. 실제 DOM에 적용할 변경 사항을 미리 계산하고, 효율적으로 업데이트를 수행함
• 구성
  • 실제 DOM의 구조를 모방한 객체 형태이다.
• 작동 방식
  • 애플리케이션에서 상태가 변경되면, Virtual DOM이 업데이트된다. 그 후, Virtual DOM과 실제 DOM을 비교하여 실제 DOM에서 변경이 필요한 부분만 찾아내고, 이를 최소화된 업데이트로 적용한다.
  • 이 과정은 실제 DOM의 직접적인 조작을 줄이고, 성능을 개선한다.

차이점 정리

• 구성 및 구조
  • DOM: 실제 웹 페이지의 구조를 표현하며, HTML 문서와 직접적으로 연관됨
  • Virtual DOM: 실제 DOM의 메모리 내 복사본으로, DOM과 유사한 구조를 가지지만, 메모리 내에서만 존재
• 성능
  • DOM: 직접적인 DOM 조작은 비용이 크고, 변경 사항이 많을 경우 성능에 영향을 미칠 수 있음
  • Virtual DOM: 변경 사항을 효율적으로 계산하고 적용하여 성능을 개선한다. 실제 DOM의 변경을 최소화하여 렌더링 성능을 향상시킴
• 업데이트 방식
  • DOM: 모든 변경 사항이 즉시 반영됨. 큰 변경이 필요할 경우 페이지 전체가 다시 렌더링될 수 있음
  • Virtual DOM: 상태 변화 시 Virtual DOM을 업데이트하고, 실제 DOM과 비교한 후 최적의 변경 사항만을 적용함. 이를 통해 렌더링 성능을 최적화함

예를 들어, 리스트 안에 30개의 항목이 바뀌는 상황이라고 생각해보자.

DOM은 매번 변경된 항목에 대해 즉시 렌더링을 수행할 수 있다. 즉, 30개의 항목 각각에 대해 DOM 조작이 일어나며, 페이지가 30번 변경될 수 있다

Virtual DOM은 리스트의 30개 항목을 변경한 후, 전체 업데이트를 Virtual DOM에서 처리합니다. Virtual DOM에서 변경 사항을 계산한 후, 실제 DOM에 대한 최소한의 업데이트만 수행한다