DOM이란?
Document Objenct Model. 브라우저와 HTML 간의 인터페이스라고 볼 수 있다. 브라우저가 HTML을 해석하고 그 내용을 토대로 페이지를 랜더링하는데 DOM이 그 역할을 한다. DOM은 HTML문서를 객체화하여 브라우저가 해석할 수 있도록 한다. 이 객체를 javascript를 이용해서 조작할 수 있는 프로퍼티와 메서드의 집합인 DOM API를 제공한다.
- DOM은 HTML과 같은 것이 아니다. HTML에는 없었던 요소를 DOM을 조작해서 추가할 수 있고, 반대의 경우도 가능하다.
display:none속성을 가진 요소를 DOM을 이용해서 선택, 수정이 가능하다. 이런 요소는 Render tree에 해당하는 뷰 포트에는 포함되지 않지만, DOM에는 포함된다.::after,::before와 같은 가상 요소는 DOM을 조작하여 선택하거나 수정할 수 없다.
Virtual DOM
리액트, 뷰와 같은 프레임워크에서 사용하는 DOM을 추상화한 모델을 이용해 DOM을 조작하는 방법이다. DOM을 직접 조작하여 변경 사항을 만들어 낼 경우, 변경 사항이 생길 때마다 Render tree를 만들어서 랜더링을 새로 한다.
기존의 DOM의 동작을 보면 HTML과 CSS를 이용해서 각각 DOM/CSSOM tree를 만든다. 이 두 tree를 합쳐서 Render tree를 구성하는데 트리의 규모가 크면 랜더링하는데 오랜 시간이 걸리는 문제점이 발생한다. 이를 해결하고자 가상 DOM이 만들어졌다.
변경 사항을 먼저 가상 DOM에 리랜더링 한 뒤에 기존의 DOM과 비교하여 차이점만 DOM에 랜더링한다.(diffing) DOM의 랜더링 횟수를 줄여서 속도를 줄이는 것이 가상DOM의 사용 목적이라고 볼 수 있다.
DOM vs Virtual DOM
중간에 가상DOM을 거친다는 점을 제외하면 DOM과 가상DOM의 동작방식은 매우 유사하다. DOM에서 10번의 랜더링이 이루어지만 마찬가지로 가상 DOM에서도 10번의 랜더링이 이루어진다. 가상DOM 또한 최적화가 잘 이루어지지 않았다면 오히려 속도가 느릴 수도 있다. DOM을 직접 조작하는 것과 가상DOM을 이용하는 것 중에 어떤 것이 더 효율적인지 알고 사용할 필요가 있고, 가상 DOM을 이용한다고 해도 어떻게 사용해야 좋을지 파악하는 것이 더욱 중요하다.
