React가 메모리에 생성한 진짜 DOM의 복사본

JavaScript 객체로 구성됨

동작

1. 상태가 바뀔 때, 새로운 Virtual DOM 생성

   상태 변경 시 즉시 새로운 돔이 생성되진 않고, Batch Update전략에 의해 한 렌더링 사이클 동안 모든 변경사항이 취합되어 한꺼번에 반영됨

2. 이전 Virtual DOM과 비교하여 변경사항 감지

3. 모든 변경사항에 대해 React가 실제 DOM 조작

왜 사용하나?

성능 최적화

DOM을 직접 조작하면, 내용이 바뀔 때마다 화면이 업데이트됨

// 이런 식으로 하면 화면을 3번 다시 그림
document.querySelector('#title').textContent = '새 제목';
document.querySelector('#count').textContent = '10';  
document.querySelector('#status').textContent = '완료';

가상 돔을 사용하면 모든 변경사항을 수집한 다음 한 번에 반영 가능