리액트[기초] Virtual DOM

DOM 이란?

• Document Object Model의 약어이다 
• 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다
• 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용하는데 DOM은 트리 형태라서 특정 노드를 찾거나 수정, 제거, 삽입이 가능하다 

---

Virtual DOM

• 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다
• 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때 3가지 절차가 있다
  1. 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리 렌더링 한다
  2. 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다
  3. 3. 바뀐 부분만 실제 DOM에 적용한다