가상 돔

: 실제 DOM을 메모리에 복사해준 것

DOM에 변화시 재생성되는 Render Tree에 대해 모든 요소들의 스타일을 다시 계산부터 Repaint 과정까지 거치게 되는데, 인터렉션이 많은 웹 경우 불필요하게 많이 드는 DOM 조작하는 비용 발생으로 성능 상의 문제를 초래하게 된다. 이를 해결해주는 방법으로 가상 돔 도입

실제 돔과 같은 모양이지만 Real DOM처럼 직접적으로 브라우저 문서에 접근 불가능

=> 화면에 보이는 요소 직접 수정 불가능

작동 원리

리액트에서는 항상 렌더링 전의 가상돔과 이후의 가상돔 보유

전에 생긴 가상돔과 비교해 바뀐 부분만 실제 돔에 적용

diffing : 바뀐 부분 찾는 과정

Reconciliation(재조정) : 바뀐 부분만 실제 돔에 적용시켜주는 것

• state 변화에 있어 하나의 변화에 조작해주는 것이 아닌 가상돔 비교로 한 번의 DOM 조작으로 모든 변화 반영