React
React 심화 Virtual DOM
mellomello.made
2022. 7. 27. 14:53
Virtual DOM
- React에는 Virtual DOM 이라고 하는 가상의 DOM 객체가 있다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, React 는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분만 적용할 수 있다.
Virtual DOM이 나오게 된 배경
- DOM을 RealDOM으로 부르는 이유는 버츄얼 돔과 구분하기 위해서다.
Real DOM (DOM-Document Object Model)
- DOM은 문서 객체 모델을 의미한다. 문서 객체란 브라우저가 자바스크립트와 같은 스크립팅 언어 <html>, <head>, <body>와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미한다. 돔은 브라우저가 트리 구조로 만든 객체 모델이다.
- DOM 객체는 트리 구조로 되어있기 때문에 자바스크립트는 쉽게 DOM 객체에 접근할 수 있고, DOM 객체를 조작할 수 있게 된다.프로그래밍 언어로 조작하는 DOM은 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 된다. DOM을 조작하는 정도가 잦다면 성능에 영향을 미치게 될 것이고, DOM의 렌더링은 브라우저의 구동능력에 의존하기 때문에 DOM의 조작 속도는 느려지게된다.
DOM의 조작 속도가 느려지는 이유
- DOM은 계층적 구조로 되어 있는 트리이다. 저장된 데이터를 더 효과적으로 탐색하기 위해 사용된다. 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있다.
- 트리구조로 된 DOM은 자바스크립트 같은 스크립팅 언어가 접근하고 탐색하는 속도가 빠르다.
- DOM이 변경되고 업데이트가 된다는 것은 브라우저의 렌더링 엔진 또한 리플로우한다는 것을 의미한다.
- 업데이트 된 요소와 해당하는 자식 요소들에 의해 DOM 트리를 재구축함으로써 재렌더링 과정을 거쳐 UI를 업데이트한다. 브라우저의 리플로우와 리페인트 과정은 레이아웃 및 페인트에 해당하는 재연산을 해야 하기 때문에 속도가 그만큼 느려진다.
Virtual DOM이란
- 리액트에는 모든 DOM객체에 대응하는 가상의 DOM 객체가 있다. 상대적으로 무거운 DOM에 비하여 리액트의 가상 DOM 객체는 실제 객체와 동일한 속성을 가지고 있음에도 “훨씬 가벼운 사본"이라고 표현된다.
- 노란색 원들은 업데이트된 노드, 즉 UI 요소를 의미합니다. React에서는 “상태가 변경된” UI 요소로 볼 수 있습니다. 그런 다음 가상의 DOM 트리의 이전 버전과 현재 가상 DOM 트리 간의 차이가 계산됩니다. 그런 다음 트리가 업데이트된 UI를 제공하기 위해 부분적으로 리렌더링 됩니다. 이렇게 업데이트된 트리는 실제 DOM으로 한꺼번에 업데이트가 된다.
Virtual DOM의 형태
가상 DOM은 추상화된 자바스크립트 객체의 형태이다
DOM 트리를 JavaScript 객체로도 표현하기
const vDom = {
tagName: "html",
children: [
{ tagName: "head" },
{ tagName: "body",
children: [
tagName: "ul",
attributes: { "class": "list"},
children: [
{
tagName: "li",
attributes: { "class": "list_item" },
textContent: "List item"
}
]
]
}
]
}
실제 DOM과 마찬가지로 가상 DOM 또한 HTML 문서 객체를 기반으로 한다.
또한 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작할 수 있다.