DOM은 무엇인가?

출처 https://nextjs.org/learn/react-foundations/rendering-ui

나는 항상 DOM이 뭔지 이해가 안됐다.
뭐 트리구조를 갖고 있고.. HTML, XML 문서의 프로그래밍 interface라고 하고... 솔직히 무슨 말인지 잘 모르겠다. 그러니까 이번 기회에 한번 이해해보자

DOM (The Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

MDN에서는 DOM을 이렇게 정의한다

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

마지막 문장에 집중해보자

결국 DOM은 JavaScript와 함께 사용된다!

그럼 우리가 자바스크립트를 사용하는 이유가 뭘까?
-> 브라우저를 동적으로 관리하기 위해서

HTML을 동적으로 보다 효율적으로 변경하기 위해서 HTML 문서(Docuemnt) 를 자바스크립트가 이해할 수 있는 객체(Object) 의 형태로 모델(Model)링 하여 자바스크립트에서 조작을 할 수 있도록 만든 ⭐️ interface가 바로 이 DOM(Document Object Model)인 것입니다.
출처: https://velog.io/@teo/dom

DOM은 어떻게 조작하지?

내가 제일 헷갈렸던 부분은 DOM을 조작한다는데 DOM은 트리구조인 것만 알지 실체가 무엇인지 몰랐다.

근데 DOM을 쉽게 알 수 있는 방법이 있다.
개발자도구의 Element가 DOM이다

DOM은 실제 HTML 코드가 아니다. 브라우저에서의 상호작용에 의해 동적으로 변하는데, 이게 어떻게 일어나는지 한 번 확인해보자.

위의 사진에서 문서 객체 모델(DOM)의 텍스트를 바꿔줄 것이다.

그러면 화면이 이렇게 바뀐다

하지만 이 상태에서 새로고침을 하면 다시 문서 객체 모델(DOM)로 바뀐다.
-> DOM은 브라우저 메모리 안에 있는 것이고, HTML 자체를 수정한 것이 아니다.

출처 https://nextjs.org/learn/react-foundations/rendering-ui

이처럼 DOM과 본래 코드인 HTML의 차이가 생기게 된다.

이런 DOM 조작은 보통 JavaScript로 하게 된다.

• document.getElementById(id)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)
• element.innerHTML
• element.style.left
• element.setAttribute
• element.getAttribute
• element.addEventListener
• window.content
• window.onload
• window.dump
• window.scrollTo

Virtual DOM

우리는 바닐라 자바스크립트보다는 React를 많이 사용한다. 그리고 React에서는 Virtual DOM을 사용한다.

왜 Virtual DOM?

DOM 조작은 실제 DOM을 조작하므로 여러번 반복하게 되면 무거운 작업이 될 수 있다.

그럼 어떻게 작동하느냐?

리액트는 항상 두개의 Virtual DOM을 갖고 있다.
1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

state가 변경될 때마다 가상돔을 생성한다.
이 가상돔은 react에서 자바스크립트 객체로 만들어져 메모리에 저장된다. (자바스크립트 객체로 따로 관리하는 건 메모리가 더 사용되지만, 기존 DOM을 직접 조작하는 것보다 빠르다.)

렌더링 이전에 화면의 내용을 담는 첫 번째 가상돔과 렌더링 이후의 가상돔을 비교해서 차이가 발생한 부분만 렌더링한다.

두 가지 가상돔을 비교하는 걸 Differing이라고 한다.
그리고 차이를 실제 DOM에 적용하는 걸 Reconciliation(재조정)이라고 한다. 이 Reconciliation(재조정)이 효율적인 이유는 Batch Update때문이다.

Batch Update는 변경된 내용들을 따로 렌더링하지 않고 한 번에 렌더링해주는 효율적인 방법이다.

+추가) map에 key prop을 전달해야하는 이유

리액트는 list를 비교할 때, 트리의 자식들이 모두 같은지 확인한다. 이때 맨 앞의 엘리먼트를 추가하는 경우 모든 엘리먼트를 리렌더링한다.

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

밑의 두 엘리먼트는 동일한데도 리렌더링 한다.

이를 방지하기 위해서 key 속성을 부여한다!
key를 부여하면 key를 통해 트리의 변환작업을 효율적이게 할 수 있다.

그래서 key에는 unique한 key 값을 줘야한다. 만약 count를 key 값으로 부여한다면 위의 예시처럼 엘리먼트가 맨 앞에 추가되는 경우 똑같이 리렌더링되는 결과가 있을 것이다.

출처:
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb

https://yong-nyong.tistory.com/80

https://ko.legacy.reactjs.org/docs/reconciliation.html#recursing-on-children