[React] Virtual Dom 이란,

DOM 이란, 브라우저에서 로드되며 노드 트리로 표현하는 도큐먼트 모델이다.

 

각자의 IDE에서 작성한 HTML은 DOM이 아니고,

작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드트리가 DOM이다.

 

즉, DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다.

 

 

Virtual Dom은 수정사항이 여러 가지 있더라도, 한 번만 렌더링을 한다.

-> DOM이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 한 번만 렌더링을 진행한다.

-> DOM에 직접 접근해도 문제가 되진 않지만, DOM이 직접 변경된다면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있다. 따라서 최대한 DOM에 직접 접근하지 말아야한다.