DOM과 가상 DOM에 대해서 알아보자

DOM?

DOM(Document Object Model)이란 HTML문서를 계층화시켜 트리 구조로 만든 모델이다
DOM은 프로그래밍 언어로 DOM에 접근 할 수 있는 방법을 제공해 HTML문서를 조작 할 수 있도록 돕는 역할을 한다

Node

여러 DOM타입이 상속 받는 인터페이스이며 따라서 Node의 기능을 똑같이 사용
할 수 있다 (firstChild, lastChild, parentNode...)

그리고 EventTarget을 상속 받기 때문에 관련된 기능 또한 사용 할 수 있다

🚀 EventTarget
EventTarget은 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스이다

출처 : MDN

DOM 사용

앞서 말했듯 자바스크립트에서 DOM을 사용해 HTML 문서에 접근 할 수 있다

const button = document.querySelector('button');

위 코드를 통해 HTML문서 안의 button을 가져올 수 있다

다양하게 접근하기

위에선 querySelector를 통해 가져왔지만 그 외에도 선택자에 접근하기 위한 다양한 메서드가 존재한다

• getElementsByClassName : Class를 통해 접근
• getElementById : ID를 통해 접근
• getElementsByName : name 속성의 값을 통해 접근
• querySelector : .name은 클래스를 #name은 id를 가져오며 첫 요소를 가져옴
• querySelectorAll : 위와 방식은 동일하지만 요소 모두를 가져옴

여기서 getElementsByClassName는 HTMLCollection을 반환하고 querySelectorAll는 NodeList를 반환한다

가상 DOM?

DOM의 단점을 보완하기 위해 만들어진 것이 가상 DOM이다

DOM의 단점

개발자는 DOM을 사용해 HTML에 접근, 변경을 반복하고 이 내용이 브라우저에 지속적으로 반영된다
이 때 변경되는 내용마다 구조를 바꾸고 다시 렌더링 하는 일련의 과정들이 해당 페이지의 성능을 저하시킨다

가상 DOM을 사용한다면?

하지만 가상 DOM을 사용하면 구조를 바꾸고 렌더링 하기 전에 가상공간에서 어떻게 구조를 변경 할 것인지 체크 한 후 최종적으로 웹에 실체화를 하는 것이기 때문에 기존 DOM보다 좋은 성능을 보여준다

가상 DOM을 사용하는 프레임 워크

대표적으로 React, Vue, Angular가 있다

Svelte
최근 들어선 가상 DOM을 사용하지 않는 Svelte가 빠르게 발전하고 있다고 하는데, Svelte는 프레임 워크가 아닌 컴파일러기 때문에 이와 같은 작업이 가능하다고 한다
하지만 아직 얼마 되지 않은 프로그램이기 때문에 기능이나 커뮤니티면에서 위의 React, Vue에 비해 좋지 않다는 단점도 존재한다고 한다.
하지만 시간이 지나고 좀 더 입지가 다져지면 프론트 엔드 개발자로서 매력적인 프로그램이 되지 않을까 생각한다

끝~