Virtual DOM

브라우저 구조와 렌더링 과정

브라우저 기본 구조 7가지 ◎ 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 버튼, 북마크 등 요청한 웹 페이지를 제외하고 사용자와 상호작용 하는 서비스들 ◎ 브라우저 엔진 사용자 인

iltae.tistory.com

브라우저가 어떤 인터렉션에 의해 DOM 변화가 발생한다면 렌더 트리가 그때마다 재생성됩니다.

이때 다시 모든 요소들의 스타일을 다시 계산하여 구조를 잡고 칠하는 과정이 반복되게 됩니다.

장바구니에 상품을 추가하거나 댓글을 다는 행동을 하면 다시 전체 노드가 처음부터 다시 그려지는 것이었습니다.

이는 불필요한 반복을 야기하고 시간이 많이 소모됩니다.

게다가 SPA를 사용하게 되면서 DOM을 조작할 일이 많아져 더 효율적으로 관리할 필요성이 늘었습니다.

간단하게 Virtual DOM은 DOM의 복사본이라 표현할 수 있습니다.

데이터가 변경되면 전체 UI는 이 복사본(Virtual DOM)에 렌더링 됩니다.

그리고 이전 복사본(Virtual DOM)과 업데이트 후의 내용을 비교하여 바뀐 부분만 실제 DOM에 적용시킵니다.

Virtual DOM는 html 객체를 표현하는 자바스크립트 객체를 활용하고 있습니다.

실제 DOM이 아닌 메모리 상에서 동작하기 때문에 훨씬 빠르고 실제 렌더링 되지 않기에 연산 비용도 적습니다.

정리하자면 Virtual DOM은 DOM fragment의 변화를 묶어서 적용한 다음 기존 DOM에 던져주는 과정을 자동화, 추상화해 놓은 것이라 할 수 있습니다.

FRONT-END