✔ Virtual DOM
DOM이란?
DOM(Document Object Model)은 HTML / XML 문서에 접근하기 위한 인터페이스입니다.
브라우저는 HTML 문서를 파싱하여 사용자에게 시각화를 해주는데 이러한 경우에 우리는 여러가지 이유로 브라우저가 띄어주는 HTML 문서에 어떤 동적 처리를 해주는 과정을 도와주는 인터페이스가 DOM입니다.
DOM은 트리 구조로 특정 노드를 찾아 수정하거나 제거하는 작업이 가능하다.
❌ DOM의 비효율적인 측면
WEB의 복잡도가 빠른 속도로 증가했고, 그에 비례해서 DOM 조작도 빈번하게 일어나게 됐다. 대규모의 애플리케이션에서 많은 동적 요소들을 움직일 때, DOM을 많이 조작하게 되고 같은 연산을 반복하는 등 상당히 비효율적이다.
이를 해결하기 위해 등장한 것이 Virtual DOM 방식을 이용해 DOM 처리 횟수를 최소화하고 효율적으로 진행할 수 있게 된다. 👉 Virtual DOM을 사용하는 이유
🚀 Virtual DOM
Virtual DOM은 하나의 가상 레이어로, Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않고 그 변경사항들을 모아 한번에 DOM에 보냅니다. 그러면 DOM은 여러번 할 일을 최소한으로 할 수 있으며, 렌더도 최소한으로 할 수 있게 된다.
React는 실제로 DOM에 바로 접근하여 사용하지 않는다.
출처: https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca
✨ 절차
- 애플리케이션 시작 시 실제 DOM이 생성되고, 브라우저에 UI가 렌더링된다. 이때 Virtual DOM은 이 DOM 트리를 가벼운 버전으로 복사
- DOM 노드에 변화가 생기면, Virtual DOM은 새로운 가상의 돔 트리를 새롭게 만든다. 새롭게 만드는 부분이 비효율적이라 생각할 수 있지만, Virtual DOM은 실제 화면에 렌더링 되는 것이 아니라 메모리 상에서만 존재하기 때문에 상당히 빠름
- 변경 전의 DOM 트리와, 변경 후의 DOM 트리를 비교 / 기존과 다른 변경된 부분을 DOM에 보냄
- 실제 DOM에 적용
이런 과정에서 Virtual DOM은 일련의 버퍼링 또는 캐싱의 과정이라고 말할 수 있다.
✍ 요약
- Virtual DOM은 하나의 가상 레이어로, Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않고 그 변경사항들을 모아 한번에 DOM에 보냅니다.
- 대규모의 애플리케이션에서 많은 동적 요소들을 움직일 때, DOM을 많이 조작하게 되고 같은 연산을 반복하는 등 비효율적 부분을 Virtual DOM 방식을 이용해 DOM 처리 횟수를 최소화하고 효율적으로 진행할 수 있게 된다.
🥄 참조링크
모르면 알아가야지🚀