📌 DOM (Document Object Model)
- 트리 구조로 되어있는 객체모델.
- 웹페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.
- DOM은 메모리에 값을 가지고있는 표현식이다.
- HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다. (DOM Tree의 노드)
- DOM은 getElementById 혹은 removeChild와 같은 메소드를 포함한다.
DOM은 트리구조로 되어있어서 이해하기 쉬운 장점이 있지만, 노드의 수가 많아질수록 속도가 느려지고,지속적인 DOM 업데이트는 잦은 오류와 사용자 인터페이스에 악영향을 끼진다.
document.getElementById('id').innerValue = 'updated value'위의 코드가 실행될 때 아래와 같은 과정이 일어난다.
- 브라우저는 HTML을 구문 분석해서 해당 ID를 가진 노드를 찾는다.
- 이 특정 요소의 자식 요소를 제거한다.
- 'updaed value'으로 요소(DOM)을 업데이트 시킨다.
- 부모 및 자식 노드에 대한 CSS를 다시 계산한다.
- 마지막으로 브라우저 디스플레이에 페인팅 된다.
✔️ 위의 과정을 보면, DOM을 업데이트 하는 것은 콘텐츠 변경을 포함할 뿐 아니라 훨씬 더 많은 작업들이 요구된다. 또한CSS를 다시 계산해야 하고 레이아웃을 변경하려면 복잡한 알고리즘이 필요하며 이는 성능에 영향을 끼친다.
✔️ 이처럼 기존에는 화면의 변경사항은 DOM을 직접 조작하여 브라우저에 반영시켰다. 이 방법의 큰 단점은 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이다. 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 렌더트리가 10번 수정되면서 새로 만들어지는 것이다.
✔️ SPA가 아닌, 여러 페이지를 구성하고 페이지의 리소스가 크지 않다면 브라우저와 서버가 별로 부담이 되지 않겠지만, 하나의 웹 페이지를 어플리케이션 처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이고, 애플리케이션이라 칭할만큼 여러 동적인 기능(실시간 기능)들이 들어가기 때문에 리소스가 모두 합쳐진 HTML 문서를 지속적으로 재렌더링 해주어야 하는 무제점이 발생하게 되었다.
예를들면, 광고창 하나가 바뀌었다고 전체 페이지가 계속 갱신되는 상황이 생긴다는 것이다.
이러한 문제점을 해결하기 위해 가상돔(Virtual Dom)이란 개념이 나온 것이다.
📌 Virtual DOM
가상돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 view를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념이다.
- 주로 SPA에서 하나의 큰 HTML 문서를 DOM으로 가지고 있다.
- 해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다.
- 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고변경사항이 모두 반영된 가상 돔을 만들어 낸다.
- 그 후 가상 돔을 이용해 한 번만 돔을 수정하게 되고 이는 한 번의 렌더트리를 만들어낸다.
- 그래서 브라우저는 불필요한 렌더링 횟수를 줄일 수 있게 된다.
참조 👇
