DOM과 Virtual DOM

• 브라우저는 HTML, CSS, javascript로 작성된 텍스트 문서를 어떻게 파싱(해성)하여 브라우저에 렌더링 할까??
• 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 형성한다. 트리라고 부르는 이유는 body안에 div, 그 안에 img 이런 식으로 뿌리에서 가지를 내리는 형식으로 이루어져 있으니까!!
• 즉 브라우저의 요청에 의해 서버가 응답은 HTML문서는 문자열로 이루어진 순수한 텍스트라서, 이걸 브라우저에 시각적인 픽셀로 렌더링하려면 그 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성하는 것이다.
• HTML 문서는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소인 노드 객체로 변환된다. 이 노드들의 계층 구조로 이뤄진것이 트리 자료구조이다. 이 트리 자료구조를 DOM이라 하는 것이다.
• 이 DOM은 트리 구조로 되어있어 이해하기 쉽지만, 노드의 수가 많아질수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. SPA(Single Page Application)에서는 HTML 문서 자체가 하나고, 여러 동적인 기능이 들어가서 안그래도 무거운 HTML을 지속적으로 재렌더링 해줘야 한다. DOM을 업데이트 하는것은 복잡한 알고리즘이 필요하다. DOM트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신되어서 너무 많은 작업들이 요구된다.
• 그래서 React에서는 Virtual DOM (가상DOM)을 사용한다. 실제 DOM을 처리하지 않고 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM가 동기화하는 개념이다. 해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품처럼 다룬다. HTML을 직접적으로 업데이트 하지 않고, 새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교해서 차이가 있는 DOM만 업데이트를 한다. 그래서 메모리 낭비가 덜하다.