우선, 돔은 HTML 태그를 말한다.
Document Object Model, HTML을 해석해 트리형 자료구조로 나타낸 것.
가상 돔은 무엇인가?
자바스크립트 객체로 만들어진 가상의 DOM.
기존의 돔의 문제는, 웹 사이트가 커지면 커질수록 태그들도 늘어나고 웹 페이지를 파악하기가 힘들어짐에 따라 이를 보완하고자 생겨난 개념이다.
가상 돔이 변화가 일어난 부분을 감지
→ 상위 컴포넌트에서 렌더링이 일어나 하위 컴포넌트까지 변환되어 렌더링이 일어난 부분을 모두 잡아낸다.
→ 가상 돔을 리렌더링 시키고 실제 돔과 비교해 바뀐 부분만 부분적으로 리렌더링을 시킨다.
한마디로 중복은 남기고, 바뀌는 부분만 바꾼다. 이게 핵심이다.
아직 이해가 덜 되어서, 좀 더 깊게 들어가보고자 한다.
우선 문제 : 실제 DOM 조작은 느리다는 것
브라우저의 DOM은 단순한 객체가 아닌 여러 스타일요소가 들어간 무거운 구조물이기 때문에,
이런 것들이 쌓이고 쌓이면 매번 화면 재계산이 일어나 성능이 급격히 떨어진다.