가상 DOM

React의 가상 DOM은 무엇이고 왜 쓰는걸까? 그리고 가상 DOM을 이용해서 어떻게 실제 DOM을 변경하는거지??

일단 DOM이 뭔지부터 알려줘요

DOM은 Document Object Model이다.
페이지(document) 안에 있는 요소들의 계층을 트리 형태로 표현한 것이다.

HTML	DOM

아래의 함수들을 사용해서 DOM에 접근하고 조작할 수 있다.

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener

---

그냥 DOM 쓰면 되지 왜 가상 DOM을 써?

변경사항이 생길 때마다 다시 그리는 repaint 작업은 자원이 많이 드는 작업이다. 따라서, 변경이 많이 발생하는 경우, 브라우저의 레이아웃 계산과 리페인트 과정이 반복되어 성능이 안 좋아질 수 있다.

이에 대한 해결책으로 React는 가상돔을 사용한다. 가상 DOM은 실제 DOM의 내용과 완전히 동일한데, 객체 형태로 메모리에 저장되기 때문에 실제 DOM 조작보다 훨씬 더 빠르다.

---

그래서 가상 DOM으로 어떻게 화면을 바꾼다는거야!

인스타그램에서 좋아요를 눌러보자!

먼저 인스타그램 화면을 DOM으로 간략하게 나타내보자

리렌더링을 하기 위해서...

1. 먼저 React는 컴포넌트의 렌더링 함수를 실행 변경될 화면의 가상 DOM을 생성할 것이다.
   

2. 기존 가상 DOM과 새로 생성된 가상 DOM을 비교하여 어떤 엘리먼트에 변화가 생겼는지 계산하고
   

3. 이 변경 사항들을 한번에 실제 DOM에 적용시키면
   

화면이 리렌더링 될 것이다!

---

요약하자면,

1. 가상 DOM 생성: 먼저, React는 컴포넌트의 렌더링 함수를 실행하여 변경될 화면의 가상 DOM을 생성한다.
2. 차이 비교(Diffing): 그리고 기존 가상 DOM과 새로 생성한 가상 DOM을 비교해서 어느 부분에 변화가 발생했는지 파악한다.
3. 재조정(Reconciliation): 변경 사항들을 모아 한번에 실제 DOM에 적용시킨다. = Batch Update

Batch Update란?
state가 2개가 바뀌었다면 화면 갱신을 2번 하는 것이 아니라, 한번에 2개를 갱신한다.