🔎 Virtual DOM
“바뀐 부분만 비교해서 그 부분만 렌더링을 할 수는 없을까?“ 라는 아이디어를 기반으로 React 에서 Virtual DOM이 탄생했다.
🤯 Real Dom 의 단점
Dom 은 문서 객체로 자바스크립트와 같은 언어가 html의 태그 <> 에 접근하고 조작할 수 있도록 태그를 트리구조로 객체화 한것이다.
돔은 트리구조 형식으로 되어있어서 상태 변경이 될때마다 즉각 업데이트가 된다.
UI를 변경하게 브라우저의 리플로우와 리페인트 과정은 레이아웃 및 페인트에 해당하는 재연산을 해야 하기 때문에 속도가 그만큼 느려지게 된다.
즉, DOM의 요소가 많을수록 업데이트에 대하여 리플로우를 해야 하므로, 느려진다.
컴포넌트2의 색상만 바꾸려 하는데 멍청한 엔진은 1,3,4 도 다시 만들어낸다.
💡 virtual dom을 사용해야되는 이유
메모리낭비 방지, 속도
가상의 UI 요소를 메모리에 유지시키고, 그 유지시킨 가상의 UI 요소를 ReactDOM과 같은 라이브러리를 통해 실제 DOM과 동기화시킨다.
실제 DOM을 조작하는 것은 브라우저 화면에 실제 그리기 때문에 느리지만, 가상 DOM을 조작하는 것은 실제로 브라우저 화면에 그리는 것이 아니기 때문에 훨씬 속도가 빠르다.
Run Start 🔥