가상돔이란?

UI의 가상적인 표현을 메모리에 저장하고, 라이브러리를 통해 실제 DOM과 동기화 하는 프로그래밍 개념.

이 동기화 하는 과정을 재조정(Reconciliation)이라고 한다.

가상돔은 왜 나왔을까?

실제 페이지는 모든 것이 DOM으로 구성되어있다.

이 DOM에서 특정 항목을 변경하고자 한다면,

document.getElementById(); 사용해서 접근해야 한다.

real dom에 element가 추가될 경우 웹페이지는 리렌더링을 진행하게 된다.

만약 데이터가 매번 바뀔 때 마다 이렇게 매번 렌더링을 진행한다면?

당연히 사용성도 떨어지고 성능도 느려지게 될 것이다.

위와 같은 트리를 매번 그리게 되기 때문이다.

그렇다면.. 이런 사용성 개선을 위한 방법이 무엇일까

HTML에서는 Document Fragment라는 태그를 제공한다.

부모가 없는 태그로 미리 생성할 element를 저장해 뒀다가 real DOM에 붙이는 방식이다.