Virtual dom 🚩

Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 재조정이라고 한다.

이 접근방식이 React의 선언적 API를 가능하게 한다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 한다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화한다. 즉, Dom을 직접적으로 조작하는게 아니라, Dom을 추상화한 객체인 Virtual Dom에 조작을 가하는 방식.

Virtual DOM은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다르다. React에서 Virtual DOM이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 React elements와 연관된다.

Virtual DOM은 Dom과 유사한 역할을 하는 객체이다.
1번을 다시 말하자면, 변경 사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정.
Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후, 구성요소의 변경이 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결

그렇다면 DOM이란 무엇일까?

Dom은 문서객체모델이라고 하는데, 브라우저에서 다룰 HTML문서를 Parsing하여 '문서의 구성요소들을 구조화하여 나타낸 것' 이다.

그렇다면 virtual Dom은 무엇 때문에, 또한 그 무엇을 어떻게 해결하기 위해 만들어진 것일까.어떤 문제를 해결하기 위한 기술일까?

문제점들

DOM 조작에 의한 렌더링이 비효율적인 문제
SPA(Single Page Application)특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제

DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게되는 문제다.

virtual Dom 에 관해 찾아본 결과 아주 간단히 왜, 무엇이, 그래서 어떻게 해결햇는가에 대해선 다음 문장으로 정리하도록 하겠다.(개념이 어렵다. 이해만 하고 넘어가는 쪽으로 하자.)