23.08.24
1. 돔(DOM)
돔(= DOM, Document Object Model) : 문서 객체 모델로 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미 => 즉, 웹 페이지의 구조
2. 가상 돔(Virtual DOM)
가상 돔(= Virtual DOM) : HTML 돔의 추상화 개념으로 간단하게 말하면 실제 돔(= Real DOM)의 가벼운 복사본
3. 돔과 가상 돔의 차이점
- 가상 돔은 실제 돔과 달리 업데이트가 빠르다.
- 가상 돔은 실제 돔과 달리 HTML을 직접적으로 업데이트 하지 않는다.
- 가상 돔은 실제 돔과 달리 메모리 낭비도 덜하다.
그래서 리액트는 실제 돔에 접근하여 조작하는 대신 가상 돔에 접근하여 업데이트 되는 데이터가 있다면 UI에서 리렌더링 되면서 가상 돔끼리 비교하여 바뀐 부분만 실제 돔에 적용하는 방식을 사용한다. 리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능 향상을 이끈다.
