IT 도서 리뷰/개발자가 되기 위해 꼭 알아야 하는 IT 용어

[PART1] 웹/디자인 - TERMS 07

goldenkiwi-coder 2024. 9. 8. 18:59

[ TERMS 07 ] DOM / Virtual DOM

1. DOM (Document Object Model) / Virtual DOM의 정의

 DOM은 HTML, XML(eXtensible Markup Language) 문서에 접근하기 위해 웹 브라우저에 내장된 API이다. => DOM을 사용해서 HTML 문서의 각 항목을 생성, 변경, 수정, 삭제할 수 있다.  DOM에서 'Document'는 HTML의 문서, 'Object'는 HTML 내의 객체를 의미한다. 이 객체 모델은 문서 내의 모든 요소를 저의하고 각각의 요소에 접근하는 방식을 제공한다.

 

 Virtual DOM은 DOM의 구조를 간략히 흉내 낸 자바스크립트 객체이다( React.js, Vue.js : Virtual DOM을 사용하는 대표적인 라이브러리와 프레임워크).  Virtual DOM은 자바스크립트 객체로 표현되고 메모리상에서 동작하여 DOM보다 속도가 빠르며 실제 랜더링도 되지 않아 연산 시간이 짧다.  Virtual DOM은 브라우저 내에 존재하는 API가 아니므로 브라우저 환경이 아니더라도 사용 가능하다.

 

2. DOM / Virtual DOM은 어디서 접하게 될까?

 DOM 기반 시스템은 변경된 부분뿐만 아니라 변경ㅇ되지 않은 부분까지 다시 랜더링하여 매번 전체 화면을 처음부터 다시 생성하기 때문에 비효율적. 웹 개발자라면 DOM과 Virtual DOM을 자주 접하고 사용하는데 개념을 정확히 인지하고 있어야 프레임워크 및 라이브러리를 용도에 맞게 사용할 수 있으며 조금 더 효율적인 웹 사이트를 만들 수 있다.

 

3. DOM / Virtual DOM 알아보기

> DOM의 개념

 DOM은 HTML이나 자바스크립트와 달리 눈에 보이지 않는다. 프로그래밍 언어도 아니고 특정 언어에 종속되어 있지 않아서 개념을 몰라도 개발을 할 수 있다. 모든 웹 브라우저는 내장된 DOM API를 사용해 HTML 문서를 읽어 웹 화면을 보여 준다.  DOM은 HTML 문서를 읽어 웹 화면에 띄워 주는 역할을 한다.

 

 DOM은 HTML 문서를 화면에 보여주는 역할도 하지만, 자바스크립트가 HTML을 조작하는 역할도 한다. 자바스크립트는 HTML뿐만 아니라 CSS도 조작할 수 있는데, CSS역시 모든 브라우저에서 'CSSOM'이라는 API를 제공하기 때문이다. DOM과 CSSOM API를 통해 HTML과 CSS를 자바스크립트가 이해할 수 있는 객체로 만들어 주기 때문에 브라우저는 DOM과 CSSOM를 통합해서 웹 화면을 보여 줄 수 있는 것이다.

 

 HTML과 자바스크립트는 다른 언어이기 때문에 서로 이해하지 못한다. HTML을 조작하기 위해서는 자바스크립트가 HTML 언어를 이해하게 해주어야 하는데, 그 역할을 수행하는 것이 DOM이다. 자바스크립트는 HTML을 조작해서 DOM에 접근하는 것이지 HTML문서 자체를 수정하는 것은 아니다. 

 

> DOM의 특징

 DOM은 웹 문서의 부모와 자식 요소인 각 노드가 트리 구조로 되어 있다.

DOM 트리 구조를 설명하는 이미지

 위 이미지는 HTML 코드를 트리 구조로 그려낸 것이다. 각각의 노드가 트리 구조로 되어 있어 자바스크립트가 HTML의 각 노드에 접근할 수 있다. 'document node'는 트리의 최상위에 위치하며, 각각의 하위 노드에 접근하기 위한 시작점이다. 'element node'는 HTML태그로 이 노드들을 조작해서 웹 브라우저에 화면을 띄워 준다. 'attribute node'는 태그의 속성에 해당되며 'text node'는 트리의 가장 아래에 위치한다. 해당 구조에서 HTML은 스스로 각 요소에 접근할 수 있으나 자바스크립트는 어렵다. DOM은 HTML을 트리 구조로 만들어 각 요소에 접근해 HTML 요소를 생성, 변경,추가, 삭제 할 수 있게 한다.

 

> Virtual DOM의 개념

 DOM의 구조가 복잡해지면 최적화와 유지 보수가 어려워진다. DOM을 조작할 때마다 랜더링 되는 과정이 많아지면 브라우저에 과부하가 쉽게 오며 자원을 많이 소모한다. 실제 DOM은 DOM을 조작할 때마다 랜더링하는 과정을 거친다. 즉, 내용이 변경될 때마다 기존에 있던 내용도 또다시 랜더링이 진행된다. 이런 비효율성을 타파하고자 Virtual DOM이 만들어졌다. 내용이 변경될때 전체가 랜더링 되는것이 아니라 변경된 내용만 파악해서 그 부분만 랜더링 하는것이 Virtual DOM의 기술이다.

 

 기존의 브라우저 DOM은 변경 사항이 있을 떄  DOM을 직접 조작했다. Virtual DOM은 DOM이 아닌 Virtual DOM에 직접 조작함으로써 기존의 내용과 변경된 부분을 알고리즘으로 비교하여 실제 DOM에 반영해준다. 

 

[DOM과 Virtual DOM이 비교되는 과정]

  1. HTML의 전체 코드가 Virutal DOM에 랜더링 된다.
  2. 몇 분 후 HTML에 'p' 태그가 추가된다.
  3. 처음에 렌더링 했던 Virtual DOM과 'p'태그가 추가된 Virtual DOM을 비교한다
  4. 처음에 렌더링된 코드가 아닌 'p'태그가 추가된 코드가 렌더링되어 DOM에 반영된다.

> Virtual DOM의 특징

 Virtual DOM을 사용한다고 해서 무조건 빠른것은 아니다(최적화를 해야 속도가 빠르다).  Virtual DOM에서도 많은 컴포넌트를 조작하면 오버헤드가 발생된다. Virtual DOM을 사용해도 속도가 느려질 수 있지만, DOM을 직접 제어하는 것에 비해 비용은 적게 든다.

브라우저 DOM과 Virtual DOM의 차이점을 설명하는 이미지

 

4. DOM / Virtual DOM을 알아야 하는 이유

 이제는 정적인 사이트를 거의 찾아볼 수 없다. 정적인 HTML 문서의 각 요소를 자바스크립트가 DOM을 이용하여 사이트가 동적으로 움직이게 만들어 준다. 웹 개발자라면 동적인 사이트를 만들기 위해 DOM의 개념을 필수적으로 알아야 한다. 현업에서는 Vanilla.js를 사용하는 곳은 많지 않다. 대부분 리액트, 뷰, 앵귤러와 같은 프레임워크와 라이브러리를 사용한다. 이 중 리액트와 뷰는 가상 돔을 사용하므로 프론트 개발자라면 가상 돔의 개념을 알아야 그 장점을 충분히 활용할 수 있다.

 

5. DOM 사용하기

 DOM을 사용하는 일반적인 순서는 다음과 같다.

  1. HTML에서 조작할 대상(요소)을 찾는다.
  2. 요소가 가지고 있는 메소드를 실행하거나 이벤트 핸들러를 등록한다.

 이런 방식으로 HTML에 접근해서 각 요소를 조작하면 된다. 만약 정적이고 정보만 나열하는 웹 페이지를 만들고 싶다면 DOM을 사용하지 않아도 괜찮다. 하지만 HTML의 이벤트를 동적으로 움직이게 하려면 HTML 문서의 요소를 제어해야 하기 때문에 DOM을 꼭 사용해야 한다.

6. DOM / Virtual DOM 더 알아보기

> DOM에 대한 궁금증

  • HTML이 DOM인가?

 DOM은  HTML 문서를 읽어 웹 브라우저에 보여 주기 때문에 HTML 자체가 DOM이라 생각하기 쉽다. 3가지의 케이스를 나누어 분석하겠다.

  1. 내가 작성한 HTML
  2. '페이지 소스 보기'에서의 코드
  3. 웹 브라우저의 개발자 도구에서 보이는 코드

 1은 HTML이 파싱(Parsing)되어서 브라우저에 보여졌다면 DOM이 맞다. 하지만 파싱되기 전 날것의 HTML은 DOM이 아니다. 만약 내가 작성한 HTML 코드에 오류가 있다면 웹 브라우저는 오류 그대로를 보여주지 않기 때문에 답이 아니다.

 

 2 또한 완벽한 DOM이라 할 수 없다. 내가 작성한 HTML 코드가 해당 페이지를 보여주기 때문에 1번과 같은 이유로 DOM이 아닐 수도 있다. 또한 백엔드 언어를 사용한 템플릿 파일을 이용하면 컴파일된 결과를 보여주기 때문에 HTML코드가 변형되거나 압축되었을 수도 있다.

 

 3은 완전한 DOM이다. 내가 작성한 HTML 코드에 오류가 있을 때 브라우저가 자동으로 HTML을 교정해서 보여 주기 때문이다. 개발자 도구에 보이는 코드는 교정 이후의 HTML을 보여주는 것이다.

 

  • DOM이 HTML과 다른 경우는 언제인가?

웹 브라우저가 자동으로 HTML을 교정해 주면, DOM과 HTML은 달라진다. HTML 파일에 'I'm really good at coding'이라고 입력하면 브라우저는 자동으로 <html/>,  <head/>, <body/> 태그를 입력해 준다. 자바스크립트로 DOM을 조작하는 경우에도 DOM과 HTML이 다르다.

 

> DOM의 종류

  1. Core DOM : 모든 문서를 위한 DOM
  2. HTML DOM : HTML 문서를 위한 DOM
  3. XML DOM : XML 문서를 위한 DOM

 

> 혼동하기 쉬운 용어

  • shadow DOM

 

> 참고 자료

  • https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
  • https://www.tcpschool.com/javascript/js_dom_concept
  • https://en.wikipedia.org/wiki/Virtual_DOM