본문 바로가기
■ Web개발/개념

DOM이란?

PLGL 2024. 9. 24. 10:56

먼저 chatGPT에게 재밌게 알려달라고 물어보자.

 

DOM(Document Object Model)은 웹 페이지를 구성하는 모든 요소들의 설계도예요. HTML 태그들이 모여서 이 설계도를 이루고, JavaScript는 그 설계도를 이용해 웹 페이지를 실시간으로 바꾸는 마법의 도구죠.

마치 레고 블록을 쌓듯이, DOM도 요소들을 계층적으로 쌓아 올린 구조예요. 예를 들어, <html>은 부모 블록이고, 그 아래 <body>와 <div> 같은 자식 블록들이 차례대로 연결돼요.

JavaScript를 이용하면 이 레고 블록들을 마음대로 바꿀 수 있어요. 예를 들어, 버튼을 클릭하면 새로운 방을 추가하거나, 창문 색을 바꾸는 것처럼 페이지에 새로운 요소를 추가하거나 기존 요소를 수정할 수 있죠.

결국 DOM은 웹 페이지를 구조화하는 뼈대이고, JavaScript는 그 뼈대를 자유자재로 움직일 수 있는 마법의 손인 셈이에요!

 

즉 DOM은 설계구조이고, js는 이를 조정하는 역할이군요.

다시 자세히 알려달라고 해봅시다.

 

 

DOM(Document Object Model)은 웹 페이지를 다루기 위해 브라우저가 이해할 수 있는 방식으로 표현한 구조체입니다. 이 구조는 트리(tree) 구조로 되어 있어서 마치 한 가족의 족보나 집안 구조처럼 요소들이 계층적으로 나열됩니다. 이를 통해 브라우저는 웹 페이지의 구성 요소들을 이해하고, 렌더링하여 사용자가 볼 수 있게 만드는 동시에, 개발자는 JavaScript 같은 스크립트 언어를 이용해 웹 페이지를 동적으로 제어할 수 있습니다.

1. DOM의 기초 개념

DOM은 웹 문서를 프로그램적으로 접근할 수 있게 만든 일종의 인터페이스입니다. 우리가 HTML 파일을 브라우저에 로드하면, 그 HTML은 브라우저에서 DOM이라는 트리 구조로 변환됩니다. 이 구조는 HTML 문서의 요소들, 속성들, 텍스트들이 어떻게 배치되고, 어떻게 상호작용하는지를 나타냅니다. 간단히 말해, DOM은 웹 페이지의 구조적 표현이며, 이를 통해 개발자는 HTML을 직접 수정하지 않고도 페이지의 구성 요소를 동적으로 조작할 수 있습니다.

2. DOM의 계층 구조

DOM은 트리 구조로 구성되어 있어요. 이 트리의 루트(root)는 html 요소입니다. 그 아래로 head와 body 요소가 각각 자식 노드로 연결됩니다. 각 요소는 부모와 자식 관계로 묶여 있어요. 예를 들어, body는 html의 자식이 되고, body 안에 포함된 div, p, img 같은 태그들은 모두 body의 자식이 됩니다. 그리고 이 자식 요소들도 다시 자신의 자식을 가질 수 있습니다. 이렇게 DOM은 계층적으로 구성되어 있어 웹 페이지를 구조화하고 각 요소들의 관계를 정의합니다.

이 구조를 보면 실제로 HTML 문서의 태그들이 그대로 트리 형태로 변환되는 것을 알 수 있어요. div 요소 안에 또 다른 div나 span이 들어갈 수 있는 것처럼 DOM도 트리 안에서 요소들이 부모-자식 관계를 통해 더 복잡한 구조로 확장될 수 있습니다.

3. DOM의 핵심 요소

DOM에는 몇 가지 중요한 개념이 있습니다. 이들을 이해하면 DOM을 더 쉽게 다룰 수 있습니다.

  1. 요소(Element): DOM에서 가장 기본적인 단위는 '요소'입니다. 요소는 HTML의 태그들(<div>, <p>, <a> 등)을 말하며, 페이지의 콘텐츠와 구조를 나타냅니다. 모든 태그는 DOM에서 하나의 노드(Node)로 변환되며, 각각의 노드는 다른 노드와 관계를 맺습니다.
  2. 속성(Attribute): 각 요소에는 속성이 있을 수 있습니다. 예를 들어 <img src="image.png">의 src는 이미지 경로를 나타내는 속성입니다. DOM에서는 이런 속성들을 다루기 위해 속성 노드를 따로 관리합니다. JavaScript를 통해 속성을 변경하거나 접근할 수 있어요. 예를 들어, 버튼의 색상을 바꾸고 싶을 때 DOM을 이용해 style 속성을 변경할 수 있습니다.
  3. 텍스트 노드(Text Node): HTML에서 텍스트는 일반 태그처럼 다뤄지지 않지만, DOM에서는 텍스트도 하나의 노드로 취급됩니다. 예를 들어 <p>Hello, World!</p>에서 Hello, World!는 텍스트 노드가 됩니다. 이러한 텍스트 노드는 부모 요소의 자식으로 존재하며, JavaScript를 통해 내용 수정이 가능합니다.

4. DOM 조작

DOM이 정말 강력한 이유는, 브라우저가 이 구조를 기반으로 페이지를 렌더링하면서도, JavaScript 등을 사용해 이 구조를 실시간으로 바꿀 수 있다는 점입니다. DOM을 직접 수정하면 웹 페이지의 내용이나 구조를 변경할 수 있습니다.

예를 들어, 웹 페이지에 있는 버튼을 클릭했을 때 텍스트가 바뀌거나, 새로운 이미지가 나타나거나, 사용자가 입력한 내용을 다른 곳에 표시하는 기능은 모두 DOM 조작 덕분에 가능해요. 이때 DOM을 수정할 수 있는 대표적인 방법은 JavaScript의 document 객체를 사용하는 것입니다. 이 객체를 통해 DOM 요소를 선택하고, 새로운 요소를 추가하거나 기존 요소를 제거할 수 있습니다.

DOM 조작의 예시

다음은 간단한 예시로, 웹 페이지에서 특정 버튼을 클릭했을 때, 텍스트가 변경되는 코드를 보여줍니다.

 
<!DOCTYPE html>
<html>
<head>
  <title>DOM 조작 예시</title>
</head>
<body>
  <p id="text">이 텍스트는 버튼을 클릭하면 바뀝니다.</p>
  <button onclick="changeText()">텍스트 변경</button>

  <script>
    function changeText() {
      document.getElementById("text").innerText = "텍스트가 변경되었습니다!";
    }
  </script>
</body>
</html>

5. DOM과 이벤트

DOM의 또 다른 중요한 개념은 이벤트입니다. 웹 페이지는 사용자의 다양한 상호작용을 감지하고 반응할 수 있어야 합니다. 이를 위해 DOM은 이벤트(event) 시스템을 제공합니다. 이벤트는 사용자가 웹 페이지에서 발생시키는 다양한 행동(클릭, 스크롤, 입력 등)을 의미합니다. 이러한 이벤트가 발생하면 JavaScript가 이를 감지하고 반응할 수 있습니다.

예를 들어, 버튼을 클릭했을 때 페이지의 내용을 변경하거나, 스크롤을 내렸을 때 새로운 콘텐츠를 로드하는 등의 작업은 모두 이벤트와 DOM을 이용해 처리할 수 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});​

6. DOM의 활용 예시

DOM을 통해 웹 페이지를 동적으로 만드는 여러 가지 방법들이 존재합니다. 예를 들어, 다음과 같은 상황에서 DOM을 효과적으로 활용할 수 있습니다.

  • 폼 검증(Form Validation): 사용자가 입력한 데이터를 실시간으로 확인하고, 오류가 있으면 경고 메시지를 출력하는 데 사용됩니다. 입력 필드의 값을 확인하고, 그에 따라 스타일이나 텍스트를 변경할 수 있습니다.
  • 동적 콘텐츠 로딩: 사용자 스크롤에 따라 새로운 콘텐츠를 자동으로 로드하는 무한 스크롤(Infinite Scroll) 기능도 DOM을 통해 구현됩니다. 이는 페이지 성능을 높이고 사용자 경험을 개선하는 데 중요한 역할을 합니다.
  • 애니메이션: DOM 조작을 통해 요소의 스타일 속성을 변경함으로써 애니메이션 효과를 추가할 수 있습니다. 예를 들어, 버튼을 클릭할 때 모달 창이 자연스럽게 나타나는 애니메이션을 구현할 수 있습니다.

7. DOM의 한계와 최적화

DOM 조작은 매우 강력하지만, 그만큼 성능 이슈를 초래할 수도 있습니다. 브라우저는 DOM을 계속해서 렌더링해야 하기 때문에, 지나치게 많은 DOM 조작은 페이지 속도를 저하시킬 수 있습니다. 이를 해결하기 위해서는 다음과 같은 최적화 기법들을 사용할 수 있습니다.

  • Batching Updates: 여러 DOM 변경을 한꺼번에 처리하여 브라우저의 리렌더링 횟수를 줄이는 방법입니다.
  • Virtual DOM: React 같은 라이브러리에서 사용하는 개념으로, 실제 DOM이 아닌 가상의 DOM을 사용하여 변경 사항을 최소화하고 성능을 최적화합니다.

결론

DOM은 웹 페이지의 구조를 이해하고 동적으로 조작할 수 있게 해주는 중요한 도구입니다. 이를 잘 활용하면 웹 애플리케이션을 더욱 인터랙티브하고 사용자 친화적으로 만들 수 있습니다. DOM은 단순한 구조체일 뿐 아니라, 이를 조작하고 관리하는 다양한 방법들을 익히는 것이 웹 개발의 핵심이라 할 수 있습니다.

 

 

2번 DOM의 계층 구조가 중요한 설명이라는 생각이 든다.

그렇다면 웹개발에 많이 쓰이는 리액트에서 쓰는 Virtual DOM은 어떤 개념일까?

 

 

Virtual DOM은 실제 DOM(Document Object Model)과는 다른 개념으로, 성능 최적화를 위해 사용되는 기술입니다. React와 같은 라이브러리에서 많이 사용되며, 실제 DOM을 직접 조작하는 것보다 빠르고 효율적으로 동작하게 만들어줍니다.

1. 실제 DOM과의 차이점

실제 DOM은 웹 페이지의 구조를 트리 형태로 표현한 것이며, 웹 브라우저는 이 DOM을 기반으로 화면을 렌더링합니다. 하지만 DOM 조작은 느릴 수 있습니다. 특히, DOM을 업데이트할 때마다 브라우저가 다시 렌더링을 해야 하고, DOM 자체는 크기가 커서 조작에 시간이 걸릴 수 있습니다. 이 때문에 많은 DOM 조작이 이루어지면 성능이 크게 떨어질 수 있어요.

Virtual DOM은 이런 성능 문제를 해결하기 위해 등장했어요. Virtual DOM은 메모리 속에서 가상의 DOM 트리를 만들고, 실제 DOM과 비교해서 차이가 나는 부분만 실제 DOM에 반영합니다. 이를 통해 브라우저가 전체 DOM을 재렌더링하지 않고, 변경된 부분만 효율적으로 업데이트할 수 있게 되는 거죠.

2. Virtual DOM이 동작하는 방식

Virtual DOM의 작동 과정을 단계별로 살펴볼게요:

  1. 렌더링 및 Virtual DOM 생성: React와 같은 라이브러리가 컴포넌트를 렌더링할 때, Virtual DOM을 메모리 내에 생성합니다. 이때, 기존의 실제 DOM을 건드리지 않고, 먼저 Virtual DOM을 만듭니다.
  2. 상태 변화 감지: 사용자가 버튼을 클릭하거나 입력을 하는 등 상태(state)가 변경되면, 새로운 Virtual DOM이 생성됩니다. 이 새로운 Virtual DOM은 이전 Virtual DOM과 비교됩니다.
  3. 차이점(Diffing) 계산: 두 개의 Virtual DOM(이전과 새로운 DOM)을 비교해서 어떤 부분이 변경되었는지를 찾는 과정이 바로 "Diffing"입니다. 이 과정은 변경된 부분만 빠르게 계산해 냅니다.
  4. 실제 DOM 업데이트: Virtual DOM에서 변경된 부분만 실제 DOM에 반영하는데, 이때 브라우저는 DOM 전체를 다시 그리는 대신, 변경된 부분만 효율적으로 업데이트합니다. 이를 통해 불필요한 DOM 조작을 줄이고, 성능을 크게 개선할 수 있습니다.

3. Virtual DOM의 장점

  1. 성능 향상: Virtual DOM을 사용하면 전체 DOM을 직접 조작하는 대신, 변경된 부분만 찾아내서 효율적으로 업데이트하므로 성능이 크게 향상됩니다. 특히, 많은 DOM 요소가 변동하는 복잡한 애플리케이션에서 효과가 큽니다.
  2. 개발 편의성: 개발자가 직접 DOM 조작을 관리하지 않아도 React 같은 라이브러리가 이를 알아서 처리해줍니다. 개발자는 변경하고자 하는 상태만 관리하면 되고, 나머지는 Virtual DOM이 효율적으로 처리하죠.
  3. 브라우저 독립성: Virtual DOM은 브라우저마다 다른 DOM 처리 방식에 종속되지 않아요. Virtual DOM은 메모리 상에서 동작하고, 최적의 DOM 변경만 브라우저에 전달하기 때문에, 특정 브라우저에 최적화된 코드 작성이 덜 필요합니다.

4. Virtual DOM의 단점

  1. 초기 비용: Virtual DOM을 생성하고 이전 DOM과 비교하는 과정 자체가 비용이 발생할 수 있습니다. 특히, 작은 규모의 애플리케이션에서는 Virtual DOM을 사용하는 것이 오히려 성능 저하를 일으킬 수 있어요.
  2. 복잡한 Diffing 알고리즘: Virtual DOM이 빠르게 작동하는 이유 중 하나는 Diffing 알고리즘의 효율성 덕분입니다. 하지만 이 알고리즘을 통해 DOM의 변경사항을 계산하는 것은 그 자체로 복잡한 연산이며, 특히 매우 큰 DOM 트리에서는 성능에 영향을 미칠 수 있습니다.

5. Virtual DOM의 사용 예시

React에서는 Virtual DOM이 기본적으로 동작합니다. React가 어떻게 Virtual DOM을 이용해 실제 DOM을 업데이트하는지 간단한 예시를 통해 살펴볼 수 있어요.

 

 

즉 DOM이 뼈대고. Virtual DOM은 임시로 복사한 뼈대라고 볼 수 있다.

리액트의 장점 중 하나는 '리렌더링'이 용이하다는 것.

위에 적힌대로 바뀐 부분만 변경해주기 때문이다.

그리고 이걸 가능하게 해주는 부분이 Virtual DOM. 즉 가상의 돔이 되겠다.

 

다만 나도 작은 프로젝트를 혼자 개발할 경우에는 그냥 html js css를 사용해서 개발을 한다.

사람들이 많이 사용하는 기술이 꼭 완벽한 장점만 있는 것은 아니기에

이것저것 비교하며 사용해보면 재밌는 것 같다~

저작자표시 비영리 변경금지 (새창열림)

'■ Web개발 > 개념' 카테고리의 다른 글

객체 비구조화 할당  (0) 2021.06.28

'■ Web개발/개념' Related Articles

티스토리툴바