•
Plain 자바스크립트로 존재하는 실제 DOM의 아주 가벼운 복사본
•
브라우저 메모리에 상주
•
실제 DOM 조작을 추상화하여 예측 가능한, 어렵지 않은 코드 작성에 도움을 줌
•
State 변화에 걱정하지 않고 개발 가능
•
Virtual DOM이 업데이트 되면 리액트는 업데이트 되기 전 스냅샷과 업데이트 된 스냅샷을 비교해 실제로 업데이트 된 부분만 실제 DOM에 업데이트 한다.
DOM 보다 빠르다?
•
실제 DOM 보다 빠르다는 말이 많이 퍼져있으나 미신임, 대체적으로 사실이 아님
•
실제 DOM 보다 메모리는 Virtual DOM을 이용한 방식 보다 상대적으로 적게 사용함
•
단순 하나의 요소 DOM 업데이트 자체만 놓고 보면 오히려 더 느림
•
UI 업데이트 시 최소한의 업데이트를 제공함 → 업데이트 횟수를 일괄처리(batch)를 이용해 최소화하여 최적화
•
Virtual DOM을 건든다? ≠ 실제 돔을 건든다 // false
◦
개발자는 리액트가 실제 DOM을 건들기 위해 청사진을 그려주는 역할 → 실제 DOM 업데이트는 React가 최적화 후 React DOM이 알아서 그려준다
Dan Abramov가 말했다.
•
미신 → 리액트가 더 빠르다!
•
현실 → 더 maintainable 한 코드를 작성할 수 있다.
Rendering
•
모든 렌더링 마다 리액트는 아래의 프로세스를 계속 진행함
프로세스
1.
애플리케이션의 UI를 그릴 때 리액트는 Virtual DOM tree를 생성함
2.
다음 업데이트 시 리액트는 자동적으로 새로 바뀐형태의 Virtual DOM tree를 생성함
3.
Diffing 알고리즘을 이용해 reconciliation(조화) 과정을 거쳐 어떤 노드가 변경되어야 할지 감지함
4.
조화 프로세스 이후 리액트는 바뀌어야할 노드를 렌더링 라이브러리인 React DOM을 이용해 변경사항을 그림 → 해당 프로세스에서 브라우저는 딱 그려야할 곳만을 repaint 함