질문 : Virtual DOM이 무엇이고, Virtual DOM(가상돔)이 어떤 면에서 좋은가요?
- React가 DOM을 조작하기 위해 사용하는 것이 Virture DOM(가상돔)입니다.
React가 랜더링이 빠른 이유는 바로 이 가상돔을 사용하기 때문입니다.
실제 DOM을 조작하는하면 전체 노드들을 처음부터 다시 그려내야하기 때문에, 자원을 소모하게 됩니다.
그러나 가상돔을 사용하면, 변경된 요소 및 노드만 파악하여 한번에, 빠르게 브라우저에 렌더링 해줄 수 있습니다.
이는 빠른 로딩속도로 사용자 경험을 증대시킬 수 있습니다.
크루답변
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.
먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
DOM이란?
- HTML 요소들을 트리형태의 구조로 나타낸 것
- 문서객체모델 (Document Object Model)
- 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 DOM에 접근할 수 있는 방법을 제공하여 문서를 변경할 수 있게 돕는다.
DOM조작의 비효율성 :
- '좋아요'버튼 누르면 전체 노드들이 처음부터 다시 그려내야함
- 이는 DOM을 조작하는 소모적인 비용
- DOM 조작을 효율적으로 관리하는 최적화가 필요하다! 그래서 나온 것이?
Virture DOM 의 효율성 :
- 기본 DOM의 복사본, 자동화, 추상화버전
- 모든 변화를 묶어서 딱 한번만 동기화(재조정)! 연산 비용이 적다.
- 가볍고 상태를 가지지 않으며, 불변성
Hello world!