가상 DOM이란

개시하다
현대 프런트엔드에서 자주 듣는 가상 DOM에 대한 지식을 정리했습니다.
DOM 및 가상 DOM

이미지와 같은 HTML의 트리 구조를 구성하는 데이터
가상 DOM은 JavaScript의 객체입니다.
일반적인 DOM 작업

const title = document.querySelector(title)

이러한 JavaScript의 DOM 작업에서 DOM이 변경될 때마다 HTML을 분석하고 렌더링하기 때문에 원가가 매우 높다
가상 DOM 작업
1: 현재 DOM 컨텐트와 동일한 가상 DOM 2개 준비
2: JS로 가상 DOM을 조작하고 변경하는 것이 (일반적인) DOM 조작보다 빠르다
3: 변경 전과 변경 후의 가상 DOM을 비교하고 그 차이점만 DOM에 반영
4: 반영된 DOM 렌더링
이렇게 하면 차이점만 나타나기 때문에 원가가 낮고 성능이 높은 성능을 발휘할 수 있다
끝말
BTC가 무서워요.