💡 (면접 질문 ver.) DOM과 가상 DOM이란?
- DOM
HTML, XML 문서의 프로그래밍 인터페이스이다.
HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다.
- Virtual DOM
추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다.
1. DOM(Document Object Model)
웹 페이지나 웹 앱에 있는 HTML 요소들을 트리형태의 구조로 표현한 것이다.
브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM노드(Node)로 이루어진 트리를 만든다. 각 노드는 HTML 요소들과 연관되어 있다.
개발자들은 DOM이 제공하는 API(getElementById, querySelector)를 통해서 DOM구조에 접근을 하고, 원하는 Element의 구조, 내용, 스타일, 레이아웃 등을 입맛대로 조정할 수 있다.
2. Virtual DOM
가상돔은 실제 돔과 같은 내용을 담고 있는 복사본이라고 생각하면 된다.
그리고 그 복사본은 실제 돔이 아닌 자바스크립트 객체 형태로 메모리 안에 저장되어 있다.
하지만 가상 돔은 실제 돔과는 다르게 브라우저에 있는 문서에 직접적으로 접근을 할 수 없다.
→ 화면에 보여지는 내용을 직접 수정 불가능.
DOM코드
<ul class="family">
<li>mom</li>
<li>dad</li>
<li>sister</li>
</ul>Virtual DOM 식으로 표현된 코드
{
type: "ul",
props: {
"class": "family"
},
children: [
{
type: "li",
props: null,
children: [
"mom"
]
},
{
type: "li",
props: null,
children: [
"dad"
]
},
{
type: "li",
props: null,
children: [
"sister"
]
}
]
}3. DOM 조작
- 브라우저가 현재 페이지의 html을 탐색해서 해당 element를 찾고, 해당 element와 자녀 element들을 돔에서 제거한다.
- 그리고 새롭게 수정된 element로 교체한다.
- 그리고 나서 css를 다시 계산하고, layout정보를 알맞게 수정하고, 새롭게 계산된 내용에 따라서 브라우저에 다시 그려준다.
매번 DOM을 조작할 때마다 브라우저 화면의 UI를 새롭게 그려주는 작업은 꽤나 복잡하고, 시간이 걸리는 작업이다.
4. 가상 DOM을 이용한 DOM 조작
가상 돔은 화면에 보이는 UI를 조작할 수 있게 해주는 API를 제공하지 않는다. 가상 돔은 메모리에 저장되어 있는 자바스크립트 객체에 불과하기 때문이다.
그렇기에 가상 돔을 생성하고 접근하기에는 가볍고 빠르다 → 실제 브라우저 화면에 접근하는 것이 아니기 때문임.
그렇다면 가상 돔을 활용해서 보다 더 효율적으로 실제 돔을 조작할 수 있게 하는 방법은?
리액트는 항상 두개의 가상 돔 객체를 가지고 있다.
- 렌더링 이전 화면 구조를 나타내는 가상 돔
- 렌더링 이후에 보이게될 화면 구조를 나타내는 가상 돔
리액트는 state가 변경될 때마다 화면이 새로 렌더링이 된다. 리액트는 렌더링이 발생될 상황에 놓일 때마다 새로운 화면에 들어갈 내용이 담긴 가상 돔을 실제 브라우저에 그려지기 전에 생성한다.
그 후에 1번 가상 돔과 2번 가상 돔을 비교해서 정확히 어느 element들이 변했는지 찾아낸다. (Diffing)
Diffing은 효율적인 알고리즘을 사용해서 진행되기 때문에 정확히 어느 element들이 변경되었는지 파악할 수 있고, 그 바뀐 element만 집어서 실제 브라우저에 적용시켜준다. (Reconciliation)
리액트의 재조정 과정이 효율적인 이유는 “Batch(집단, 무리) Update”덕분이다
→ 변경된 모든 element들을 집단으로 실제 돔에 한번에 적용시켜준다. 만약 list안에 10개의 항목이 바뀌었다면 실제 돔을 10번 반복해서 조작하는 것이 아니라 변경된 부분을 한꺼번에 받아와서 집단으로 적용시켜준다.
⇒ 그래서 빠르고 효율적이라고 하는 것이다.
5. 하지만
대부분의 상황에서 Virtual DOM은 빠르지 않다.
Virtual DOM을 이용하겠다는 건 데이터를 한번 조작하고, DOM을 또 한 번 조작하겠다는 이야기이다. 당연히 DOM을 바로 조작하는 것보다 느리다.
하지만 복잡한 SPA(싱글 페이지 어플리케이션)에서는 DOM조작이 많이 발생한다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 연산을 많이 해야한단 소리고, 전체적인 프로세스를 비효율적으로 만든다.
이렇게 극소수의 상황에서 (react가 이용하는) DOM 조작이 너무 빈번하게 일어날 경우, Virtual DOM을 이용하는게 더 효율적이다.
뷰에 변화가 있다면, 그 변화는 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM으로 전달해준다. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것이다.
💡 virtual DOM 정리
리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다.
그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있다.리액트는 항상 두 개의 가상돔을 갖고 있다. 첫 번째는 가상돔은 변경 이전의 내용을 담고 있고, 두 번째 가상돔은 변경 이후에 보여질 내용을 담고 있다.
변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 그리고 이러한 과정을 Diffing 이라고 부른다.
Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한번에 적용시켜준다. 그리고 이러한 과정을 재조정 이라고 한다.
참고 reference
[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)
