DOM이란?

프론트엔드 개발을 시도해 본 사람이라면 한번쯤은 들어봤을 용어, DOM은 무엇일까?

 

리액트를 이용한 대시보드를 만들고자 나는 최근에 HTML과 CSS에 대한 간략한 공부를 마치고, 리액트 공부를 하던 중 

가상 DOM을 사용한다는 것을 보았고,

 

이전에 GTM을 이용한 GA4 적용 중, 'DOM 로드 시' 에 발생되는 트리거와 이벤트도 있었기에, DOM이 무엇인지에 대해 알아보고 싶었다.

 

 

DOM 설명 전, 웹브라우저가 HTML문서를 어떻게 시각적인 화면으로 보여주는지에 대해 먼저 알아보겠다.

크롬이나 엣지와 같은 웹브라우저는 HTML 문서를 해석하고, 모니터를 통해 해석된 화면을 보여준다.

 

이 과정을 렌더링 이라고 부른다.

크롬이나 엣지와 같은 웹브라우저는

 

브라우저가 HTML 코드를 해석해 요소들을 트리 형태로 구조화해 표현하는 데이터를 생성하고,

정적인 코드를 객체로 변경시키기 때문에 문서 객체 모델

Document Object Model

DOM이라고 부른다.

 

트리 형태로 존재하는 DOM

왜 트리형태로 존재하는지에 대한 해답은, HTML이 트리 형태로 존재하기 때문이라고 답변이 가능하다.

 

DOM은 웹브라우저가 페이지를 렌더링하는 데 쓰이는 중간 해석 단계이며,

DOM이 없다면, 자바스크립트와 같은 언어는 웹페이지의 요소들에 대한 정보를 갖지 못하게 되고,

웹콘텐츠 추가,수정,삭제, 그리고 이벤트 처리 등이 불가능해지게 된다.

HTML은 사용자의 사용에 따라 변하지 않는 정적인 텍스트이므로, 웹 화면의 요소가 변경되기 위해 꼭 필요한 객체가 바로 DOM인 것이다.

 

 

(그래서 자바스크립트와 DOM은 초기에 함께 발전해왔다.)

 

 

리액트가 Virtual DOM을 사용한다는 것은, UI에 변경 사항이 있을 때 가상DOM을 먼저 업데이트한 다음 실제DOM과의 차이를 확인하여 실제 DOM을 수정하는 방법으로, 불필요한 DOM조작을 최소화함으로써 더 나은 성능으로 이어질 수 있게 한다.