리액트와 Virtual Dom

우선 돔은 Document Object Model, 문서 객체 모델이다. 

문서 객체란 웹페이지를 이루는 html, head, body와 같은 태그들을 javascript가 이용할 수 있도록 만든 객체이다.

(브라우저가 만들었다. 트리구조로.)

 

리액트는 가상돔을 사용한다. 실제 돔이 아닌 가짜돔.

웹페이지에서 사용자의 동작에 따른 이벤트가 발생하면 실제돔을 바로 바꾸지 않는다.

먼저 자바스크립트로 된 가상돔을 랜더링한다(가상돔에 올라간다라고도 표현). 가상돔은 메모리에 저장된다.

그리고 이전의 돔과 비교를 하여 다른 요소(변경부분)만 실제 돔에 반영한다.

 

반영을 할 때는 수정을 하는 것이 아니다.

이전의 돔에 있던 요소를 버리고 새로운 요소로 갈아끼우는 것이다.