1. DOM

• HTML을 파싱해서 얻은 객체. JavaScript로 조작할 수 있다.
• 브라우저에서 변경사항이 생기면 변경된 상태의 개수만큼 화면 전체를 다시 렌더링한다 ⇒ 불필요한 중복 렌더링이 발생한다.

2. Virtual DOM

• 실제 DOM의 복사본
• 실제 DOM에 너무 자주 접근하는 것은 큰 오버헤드가 발생한다.(reflow, repaint)
• Virtual DOM에서 변경사항을 반영한 후에 변경 전의 Virtual DOM과 변경된 Virtual DOM을 Diffing 알고리즘을 통해 비교하여 변경된 부분만 실제 DOM에 렌더링한다. ⇒ 실제 DOM은 한번만 렌더링 되므로 중복 렌더링이 발생하지 않는다.
• Virtual DOM 끼리의 비교가 수행될 때, 엘리먼트의 key 속성을 이용해서 각각의 엘리먼트들을 식별한다. 만약 key 속성이 없으면 어떤 엘리먼트에 변화가 있었는지 빠른 비교를 할 수 없게 된다.