**Virtual DOM(VDOM)**은 UI가 어떤 모습이어야 하는지를 기술하는 가벼운 JavaScript 객체 트리입니다. 이는 실제 브라우저 DOM이 아니라 메모리 상의 단순한 표현입니다. React가 이를 사용하는 이유는 실제 DOM을 직접 조작하는 것이 느리고, 상태가 변경될 때마다 수동으로 처리하면 오류가 발생하기 쉽기 때문입니다.
동작 방식
상태가 변경될 때 React는 즉시 페이지를 건드리지 않습니다. 대신 다음을 수행합니다:
- 컴포넌트로부터 새로운 virtual 트리를 구성합니다.
- 이전 virtual 트리와 **비교(diff)**하여(reconciliation) 최소한의 변경 집합을 계산합니다.
- 그 변경 사항만 하나의 일괄 업데이트로 실제 DOM에 적용합니다.
jsx
() {
[n, setN] = ();
;
}
