[vue] DOM 과 Virtual DOM

※ 뇌피셜 주의

DOM

웹페이지는 정적인 HTML 소스 코드로 되어있습니다. 이 정적인 HTML 소스 코드를 문서(document) 라고 하는데, 브라우저가 문서를 읽으면서 조작 가능한 객체로 만듭니다. HTML 소스코드를 조작 가능한 객체로 만든 것을 DOM (Document Object Model) 이라고 부릅니다.

 

그리고 스크립팅 언어(자바스크립트) 같은 것으로 DOM에 접근해서 DOM을 조작할 수 있습니다.

 

Virtual DOM

자바스크립트가 연산을 하면서 돔을 직접 변경하는건 비용이 많이 드는 일입니다. 예를들면, 방의 인테리어를 바꾸기 위해 침대를 이 방, 저 방, 가로로 놓아보고 세로로도 놓아보는건 힘이 많이 듭니다. 옮기기 전에, 미리 어떻게 인테리어를 바꿀지 노트에 그려보고, 변경사항만 적용하는게 비용이 적게 드는 일입니다.

 

그래서 Virtual DOM 이라는 패턴이 생겼습니다. vue나 react에서는 가상의 돔(Virtual DOM)으로 연산을 끝내고, 최소한의 비용으로 real DOM을 생성하거나 조작합니다. 

 

mount

렌더러가 virtual DOM tree를 만들고, 연산이 끝난 virtaul DOM을 기준으로 real DOM tree를 만듭니다. 이과정을 mount라고 부릅니다.

 

patch 

real DOM tree를 복사해서, virtual DOM tree를 두 장 만듭니다. 그 중 한 장을 연산 하고, 다시 두 장을 비교해서 차이점만 찾아냅니다. 그리고 real DOM에 변경사항을 적용합니다. 이 과정을 patch(또는 diffing 이나 reconciliation) 이라고 부릅니다.