가상 DOM에 대한 검토

개시하다

처음 뵙겠습니다.
최근 몇 년 동안, React와 Next.js처럼 가상 DOM을 사용하여 개발하는 경우가 많아졌다.
나도 이런 개발을 사용하지만 과장된 절차와 시기 등이 있고 DOM이 추진하지 않는 점에 대해 설명한다.
그래서 이번에는 자신의 지식을 깊이 있게 하기 위해 가상 DOM을 조사하고 정리했다.
오류 등 지적/리뷰가 됐으면 좋겠다!!

원래 덤은?

DOM

가상 DOM에 액세스하기 전에 먼저 DOM에 액세스해야 합니다.DOM은 HTML과 XML 같은 파일을 프로그램을 통해 직접 변경할 수 있는 인터페이스DOM 소개 - 웹 API | MDN를 가리킨다

<h1 id="title">Hello DOM</h1>

const title = document.getElementById("title");
title.innerHTML = "title are changed";
title.style.color = "red";

getElementById를 사용하여DOM에서'title'id를 가진 요소를 얻었습니다.얻은 요소는 innerHTML로 직접 바꿀 수도 있고 스타일로 변경할 수도 있습니다.

렌더링된 구조

나타나는 기본 절차는 다음과 같다.

인용자 브라우저 구조:최신 웹 브라우저의 내부 구조

HTML의 해석

먼저 브라우저에서 요청한 내용을 화면에 표시할 때 HTML 등의 문서를 분석하여 렌더 엔진의 내부 표현으로 변환합니다.

HTML을 읽을 때 분석된 내용을 DOM 트리로 구성합니다.
변환은 다음 절차에서 진행되며 이미지와 CSS 등의 취득과 읽기도 진행된다.

어휘 해석을 통한 영패의 목록화

문법 분석을 통해 문법 트리 구축

문법 트리에 있는 자바스크립트를 실행하고 DOM 트리를 구축

읽은 CSS는 렌더링 엔진을 통해 분석하여 CSSOM 트리로 변환

렌더 트리 구성

문서를 분석하고 DOM 트리와 CSSOM 트리를 조합하여 렌더 트리를 구성합니다.

인용자 렌더 트리의 구성, 배치 및 그리기
렌더 트리는 내용을 올바른 순서로 그리고 내용의 구조를 보여 줍니다.렌더 트리 구성이 올바르면 레이아웃 처리를 시작합니다.

배치 처리

레이아웃 처리에서 구축된 렌더 트리에 따라 실제 위치와 사이즈에 대한 정보를 추가합니다.부모 노드부터 레이아웃을 시작하여 하위 노드까지 귀속시킨다.

그리다

표시된 노드와 스타일, 레이아웃 등을 알기 때문에 이러한 정보에 따라 화면에 실제로 그려진다.이 단계에서는 실제 픽셀로 변환됩니다.
이렇게 하면 화면에 실제로 나타나기 전에 URL에 요구되는 HTML 등을 분석해 각각의 트리로 구축한다.구문된 트리에 실제 표시된 위치와 크기 등의 정보를 추가하여 그립니다.
이러한 렌더링 프로세스는 DOM 이벤트가 사용자의 작업 또는 실행 프로세스로 인해 불이 났을 때 다시 렌더링 처리됩니다.
위에서 말한 바와 같이 렌더링은 브라우저에 있어서 비용이 비교적 높은 처리이다.
가상 DOM은 불필요한 렌더링 처리를 줄이고 렌더링 비용을 줄입니다.

가상 DOM이란 무엇인가?

가상 DOM은 DOM을 Javascript로 표현하는 객체입니다.DOM 자체를 조작하는 것이 아니라 객체를 수정하고 차분만 DOM에 반영하여 성능을 향상시킨다.
실제로는 다음과 같은 절차에 따라 진행된다.

가상 DOM 트리 2종(변경 전후 2종) 준비

검측 데이터의 변경

가상 DOM 재구성

변경 전후 가상 DOM 트리를 사용하여 차분 측정

DOM

가상 DOM을 사용하면 구현 비용을 절감할 수 있을 뿐 아니라

UI 및 논리 분리

상태 관리 단순화

UI 및 논리적 연결 용이

이런 이득도 얻을 수 있다.
반대로 대상을 잘 관리하지 않으면 성능이 떨어진다.
예를 들어 고유의 키가 없으면 불필요한 부분을 다시 쓸 수 있다.
성능을 높이고, 떨어뜨리지 않기 위해서는 어디서 차점을 얻어 재현할지 고민할 필요가 있다.
여기서 실제 단추를 눌렀을 때의 코드 비교를 살펴봅시다.

DOM을 직접 조작하는 경우

<div id="app">
  <p id="counter">0</p>
  <button type="button" id="increment">+1</button>    
</div>

<script>
const state = { count: 0 };
const btn = document.getElementById('increment');
btn.addEventListener('click', () => {
  const counter = document.getElementById('counter');
  counter.innerText = ++state.count;
})
</script>

상술한 코드는 다음과 같다.

state라는 대상에서 현재count수(초기값 0)

를 관리합니다

id를 통해 button 탭 가져오기 ("increament")

단추가 눌렸을 때 id가 "counter"요소를 획득

획득할 요소의 문자state.count로 증가, 업데이트

이 경우 UI와 논리가 섞여 있고 상태 관리 등이 번거로운 인상을 준다.

가상 DOM(React) 시

Counter.jsx

export const Counter = () => {
  const [count, {increment}] = useCounter();
  return (
    <div>
      <p id="counter">{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  )
}

useCounter.js

export const useCounter = () => {
  const [counter, setCounter] = useState(0);
  const increment = () => {
    setCounter(counter+1);
  }
  return [counter, {increment}]
}

위 코드에서는 UI를 담당하는 부분과 논리를 담당하는 부분이 분리되어 있습니다.
이처럼 UI에서 논리를 분리해 논리를 유연하게 활용할 수 있고, 최종 View의 상태는 이해하기 쉽고 상태를 관리하기 쉽다.

총결산

DOM 및 가상 DOM 요약
기존 DOM에 비해 가상 DOM은 구현 비용을 절감하고 개발 과정에서 UI와 논리를 분리하기 쉽다.
이는 렌더링 성능을 향상시키면서 잘못 처리하면 오히려 성능이 떨어진다.
이를 깨닫고 앞으로도 계속 개발하고 싶다.

참고 문장

브라우저 구조:최신 웹 브라우저의 내부 구조
가상 DOM은 정말 빠릅니까?DOM 작업의 새로운 아이디어를 이해하기 위한 프레임워크 구현
브라우저 렌더링의 구조