🌳 DOM이란?
Document는 HTML 요소이기 때문에 자바스크립트로 조작이 불가능한데, 이를 가능하도록 도와주는 것이 바로 DOM(Doocument Object Model)이다. DOM을 사용해서 원래는 조작이 불가능한 HTML을 자바스크립트의 객체로 모델링하여 조작할 수 있다.
DOM은 웹페이지의 구조와 콘텐츠를 표현하는 트리 구조로 이루어져 있다. 애플리케이션은 상태가 변경되면 이 DOM을 조작하면서 전체적으로 업데이트된다. 이는 때때로 비효율적으로 동작할 수 있다. 예를 들어, 단순히 텍스트의 일부만 변경되는 경우에도 전체 DOM이 업데이트되는 문제가 발생한다. 이는 많은 연산 비용과 성능 문제를 유발한다.
🌳 가상 DOM이란?
리액트는 가상 DOM(Virtual DOM) 개념을 기반으로 동작하는 JavaScript 라이브러리이다. 가상 DOM은 실제 DOM을 추상화한 자바스크립트 객체로, 실제 DOM 조작의 문제를 해결하기 위해 등장했다. 가상 DOM을 사용하면, 메모리 상에 가상으로 구성된 DOM을 유지하면서 실제 DOM과의 차이를 비교하여 필요한 변경 사항만을 실제 DOM에 반영할 수 있다. 이는 실제 DOM 조작을 최소화하고 성능을 향상시킬 수 있다.
🌱 가상 DOM의 동작 원리
- 웹 애플리케이션의 초기 렌더링 시점에는 실제 DOM의 구조를 반영한 초기 가상 DOM이 생성된다.
- 가상 DOM은 웹 애플리케이션의 상태를 추상화한 데이터 모델을 유지하며, 상태 변경이 발생하면 해당 변경 사항을 가상 DOM에 반영한다.
- 상태 변경이 반영된 가상 DOM과 이전에 구성된 가상 DOM의 노드의 속성(Attributes), 텍스트 내용(Text Content), 자식 요소(Child Elements) 등을 비교한 후, 이 비교를 통해 실제 DOM에 반영해야 할 변경 사항을 파악한다.
- 식별된 변경 사항을 바탕으로 실제 DOM을 업데이트한다. 변경 사항에 따라 새로운 요소를 추가하거나 기존 요소를 수정, 삭제합니다. 이때, 실제 DOM 조작은 최소한으로 수행된다.
- 실제 DOM이 업데이트된 후, 가상 DOM은 최신 상태로 갱신된다. 변경된 실제 DOM을 기반으로 가상 DOM의 상태를 업데이트하고 다음 상태 변경에 대비한다.
🌱 가상 DOM의 장점
🧩 성능 최적화
가상 DOM은 실제 DOM 조작을 최소화하여 성능을 향상시키므로, 변경 사항이 많은 대규모 웹 애플리케이션에서 특히 유용하다.
🧩 효율적인 UI 업데이트
가상 DOM은 변경된 부분만을 업데이트하므로 UI 업데이트가 효율적으로 이루어진다. 이로써 사용자 경험을 향상시킬 수 있다.
🧩 플랫폼 독립성
가상 DOM은 실제 DOM과는 독립적으로 동작하므로 플랫폼에 종속되지 않는다. 따라서, React와 같은 프레임워크를 사용하여 웹, 모바일, 데스크톱 등 다양한 플랫폼에서 동일한 코드를 재사용할 수 있다.
