[CS] - Dom, Virtual Dom

DOM에 관련하여 강의를 보거나, 개발 관련 유튜브를 보면서 얘기를 많이 들어만 봤지 정확한, 정의를 이해하지 못하고 있는 거 같애서, 공부를 할겸, 정리를 해보자~!!

먼저 DOM을 설명하지 전에 DOM의 상위 개념인 BOM에 대해서 먼저 알아보자!

BOM(Browser Object Model)

브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model) 이라고 합니다. 이 브라우저 객체 모델을 이용해서 Browser와 관련된 기능들을 구성합니다. DOM 은 이 BOM 중의 하나 입니다.

브라우저 객체 모델의 최상위 객체는 window 객체입니다. DOM은 이 window 객체의 하위 객체이기도 합니다.

DOM

DOM 을 풀어서 설명하면 Document Object Model 입니다. 해석을 하면 '문서 객체 모델' 이죠.
이 문서 객체란 이나 같은 html 문서의 태그들을 js가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다.

즉, DOM 은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.

DOM 의 형태

DOM tree

dom tree는 하나의 root node에서 시작해서 아래로 퍼져나가는 형태로 그립니다.

• tree에서는 위쪽의 node를 부모, 아래쪽 노드를 자식이라고 합니다.
• root node는 가장 최상단에서 시작하는 node니까, 부모가 없는 node가 됩니다. 그리고 자식이 없는 node를 leaf node 라고 합니다.

node 란 무엇인가?

tree 구조에서 root 노드를 포함한 모든 하나의 개체를 node라고 합니다. 이 중, HTML 태그를 요소노드(element node)라고 부르고 요소 노드안에 있는 글자를 text 노드라고 부르기도 합니다.

Javascript 로 문서객체를 생성한다는 것은 어떤 의미인가?

1. 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 태그를 생성하는 것
2. 원래 HTML에 없던 문서객체를 js를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 js로 문서 객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다.

Virtual DOM 을 쓰는 이유

• DOM 조작에 의한 렌더링이 비효율적인 문제

• SPA(Single Page Application) 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제

  결론적으로, DOMDMF 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술.

해결방법

해결방법은 바로 Virtual DOM 이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓는 것입니다. Virtual DOM은 DOM 과 유사한 역할을 담당할 객체입니다.

즉, 변경사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual Dom을 통해서 Dom을 수정하게 했습니다. 실질적인 방법은 Virtual Dom에 변경 내역을 한번에 모르고(버퍼링) 실제 dom과 변경된 virtual dom의 차이를 판단한 후, 구성요소의 변경된 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결 가능 합니다.

만약 가상 dom 이 없었다면, dom은 렌더링을 처음부터 해야했기 때문에 모든 것들을 다 렌더링해야된다.
그래서 직업 dom에 접근하는 것은 지양해야 한다.

이는 dom에 직접 접근해도 문제가 되진 않지만, dom이 직접 변경된다면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있다.