Virtual Dom 다시 이해하기

DOM

Document Object Model

엘리먼트 하나하나를 트리 형태로 구성한 것이다. (= DOM Tree)

DOM API를 통해서 접근과 제어가 가능하다.

Virtual Dom

가상 DOM은 실제 DOM과 완벽히 동일한 복사본의 형태이다. 객체 형태로 메모리에 저장하기 때문에 실제 DOM을 조작하는 것보다 훨씬 더 빠르게 조작이 가능하다.

1. 화면이 갱신되기 전 첫 번째 가상돔

2. 화면 갱신 후 보여줘야 할 가상돔

diffing

2번에서 생성된 가상돔과 1번에서 이미 갖고 있었떤 가상돔을 비교해서 어느 부분에서 변화가 일어났는지 빠르게 파악한다.

재조정 (reconciliation )

적용시킬 때 한 건 한 건 적용시키는게 아니라 Batch Update로 변경사항을 모두 모아 한 번만 적용을 시킨다.