React - Virtual Dom

개념
실제 DOM과 같은 내용을 담고 있는 복사본
이 복사본은 자바스크립트 객체 형태로 메모리 상에 저장되어 있다.

존재 이유
기본적으로 브라우저는 DOM을 업데이트하기 위해서 수 많은 일들을 최소화하기 위함

DOM 업데이트 과정
  1. 변경될 요소를 찾는다.
  2. 찾은 요소와 자식 요소를 제거
  3. 새로운 요소를 추가
  4. CSS 계산
  5. Layout정보를 알맞게 수정

요소가 tree로 저장되어 있어서 탐색과 추가 및 삭제는 빠르게 진행된다.
하지만 브라우저에 새롭게 그려주는 작업은 꽤나 복잡하다.
N가 수정되면 N번 브라우저를 새롭게 그러주는 작업을 해줘야 해서 비효율적이다.

특징
리엑트는 항상 두개의 virtual dom을 갖고 있다.
첫번째는 변경 이전의 내용을 담고 있고, 두번째는 변경 이후에 보여일 내용을 담고 있다.

Diffing
전제: state가 변경될 때 마다 리엑트는 새롭게 UI를 그린다
state가 변경된 내용을 담고 있는 virtual dom이 있고,
UI에 노출된 정보를 가지고 있는 virtual dom이 있음.

둘이 비교해서 어느 요소가 변경되었는지 확인

Reconciliation
Diffing을 통해 변경된 요소만 Batch Update를 이용해서 실제 브라우저에 적용 시킴
즉, 변경된 요소가 여러개 있을 때 한번에 변경시킴 (화면에 그려주는 작업을 여기서 최소화)

참고
https://youtu.be/gc-kXt0tjTM