DOM
DOM 이란?
Document Object Model
웹에서 가장 많이 사용하는 언어 중 하나인 HTML 등으로 작성된 문서를 계층으로 표현하여 문서 내의 헤드(Head), 폼(Form)과 같은 객체를 변형, 제어할 수 있도록 하는 인터페이스
DOM 사용 예시
// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.
document.getElementById("demo").innerHTML = "Hello World!";
// p 태그들을 모두 가져와서 element 변수에 저장해줘
const element = document.getElementsByTagName("p");
// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘
const x = document.getElementsByClassName("intro");Virtual DOM
Virtual DOM 이란?
👉 Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다.
React는 가상 DOM을 이용해서 실제 DOM을 변경하는 작업을 매우 효율적으로 수행한다.
가상 DOM은 실제 DOM과 구조과 완벽하게 동일한 복사본 형태이다.
가상 DOM은 객체(Object) 형태로 메모리에 저장되므로 실제 DOM을 조작하는 것보다 훨씬 빠르게 조작할 수 있다.
(실제 DOM을 조작하는 것보다 메모리 상의 javaScript 객체를 변경하는 작업이 훨씬 가볍다.)
Virtual DOM -> DOM에 반영되는 과정
STEP 1️⃣
이 과정에서 리액트는 항상 2가지 버전의 가상 DOM을 가지고 있다.
- 화면 갱신 전 구조가 담겨있는 가상DOM 객체
- 화면 갱신 후 보여야 할 가상 DOM 객체
state가 변경되어 리렌더링이 일어나면 2번에 해당하는 가상 DOM을 만든다.
STEP 2️⃣ : Diffing Algorithm
state가 변경되면 화면 갱신 후 보여야 할 가상 DOM 과 화면 갱신 전 구조가 담겨있는 가상 DOM 을 비교해서 어느 부분이 변화되었는지 빠르게 파악해낸다.
STEP 3️⃣ : Reconciliation (재조정)
파악이 끝나면 변경이 일어난 그 부분만 실제 DOM에 적용시킨다.
적용시킬 때는, 변경사항을 모두 모아 한번만 적용을 시킨다. (Batch Update)
클릭 한번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면?
- 실제 DOM : 5번의 화면 갱신 필요
- 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요
[정리]
- VanillaJS : Vanilla JavaScript에서는 DOM 변경을 직접 처리한다. 즉 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행한다. DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그린다. 이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능을 저하시킬 수 있다.
- ReactJS : React JS는 DOM 변경을 처리하기 위해 가상 DOM (virtual DOM) 이라는 개념을 도입한다. ReactJS에서는 먼저 메모리에 가상 DOM트리를 생성한다. 이 트리는 실제 DOM 트리의 사본으로서, 실제 DOM 트리와 별도로 존재한다. ReactJS는 상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악한다. 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식을 사용한다. 이 과정을 ‘재조정(Reconciliation)’ 또는 ‘Diffing’이라고 부른다. 가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM 에 반영되기 때문에 불필요한 연산을 줄이고 성능을 향상시킬 수 있다. 따라서 ReactJS는 복잡한 UI 업데이트를 효과적으로 처리할 수 있으며, 이를 통해 웹의 응답성을 향상시키고 사용자 경험을 개선할 수 있다.
느리더라도 조금씩, 꾸준히