Virtual DOM (가상DOM) - React, Javascript

오늘은 Virtual DOM에 대해 알아보겠습니다.

Virtual DOM이란 React.js, Vue.js등 javascript기반으로 된 프레임워크에서 사용되는 기술로 DOM조작을 효율적으로 만들어 주기 위한 기술입니다.

 

그럼 DOM이란 무엇일까요?

사전적 의미를 통해 제가 이해한 내용들만 작성해 보겠습니다.

DOM이란 Document Object Model이라는 "문서객체모델"로서 여기서 Document는 HTML파일을 의미합니다. 

즉, HTML 파일의 Object들인 Element(input,li,h1,button 등)들이 수정 또는 값을 입력받는 등 기능을 요할 수 있게 객체로 실체화된 형태를 DOM이라고 부릅니다. 

이 DOM의 형태를 노트에 적어보면 나무가 가지치기한 모습처럼 보여지기에 이 구조를 DOM Tree구조라고 부릅니다.

DOM tree 구조 / 출처 : https://poiemaweb.com/js-dom

그럼 DOM의 개념을 어느정도 알겠는데 왜 이게 비효율적이라 Virtual DOM과 같은 새로운 기술들이 나오는 걸까요?

 

그건 DOM구조 속 Element중 일부분이 변경되었을 때 해당 Element를 getElementById( )또는 querySelector( )등을 통해 접근하여 수정하게 되는데, 수정을 할 때마다 DOM파일을 다시 리로딩하기 때문에 비효율적이고, 유저사용성이 떨어질 수 있습니다(변경될때마다 화면이 깜빡거리는 등) 

 

그래서 React.js와 같은 SPA(Single Page Application)에서는 Virtual DOM(가상DOM)이라는 기능을 이용해 효율적으로 브라우저에 데이터를 로딩하게 되었습니다.

 

그럼 Virtual DOM이란 말그대로 DOM구조를 그대로 가져와 복사한 가상의 복사본으로 DOM과 같은 구조를 가지고 있지만, 실제 DOM이 아니라 js안 객체형태로 메모리에 저장되어있기에 직접적으로 브라우저 문서에 접근할 수 없습니다. 

"뭐야 접근도 못하는데 왜쓰는거야?" 라고 생각할 수 있는데, 비유를 통해 왜 효율적인지 설명해 보겠습니다.

 

 

DOM이 실제 집이라고 한다면 Virtual DOM은 실제 집과 정말 똑같은 모양의 미니어처라고 비유하면 쉬울거라 생각합니다.

실제 집 : DOM / 실제 집과 같은 미니어처 : Virtula DOM

만약에 이 집의 가구들 중 침대, 소파, 커튼을 다른 제품으로 바꾸고 싶다고 가정해 봅시다.

어떤 제품이 어울릴지 어떻게 해야 구성이 예쁠지 조금씩 바꿔보며 가구를 보고 싶은데 실제 크기의 가구들을 하나하나씩 옮긴다고 가정하면 굉장히 비효율적이고 힘들거라고 생각합니다. 이게 Javascript의 DOM조작이라고 비유할 수 있다면, Virtual DOM이라는 미니어처가 있다면 미니어처로 손쉽게 가구를 재배치 해보고 나서 결정이 되면 집에 들어가 한번에 가구를 배치할 수 있는 효율적인 구조라고 생각합니다.

 

이제 비유를 통해 가볍게 이해가 되셨다면 Virtual DOM이 무엇인지 더 확인해볼까요!?

 

Virtual DOM은 미니어처와 같이 가상의 DOM이기 때문에 직접적으로 문서에 접근이 가능하진 않지만, React에서 State가 변경되고 화면에 리랜더링 되는 과정 사이에 가상돔이 기능을 발휘합니다. 

React에는 두가지의 가상돔이 존재합니다.

첫 번째 가상돔은 변경 이전의 내용을 담고 있고, 두 번째 가상돔은 변경 이후에 보여질 내용입니다.

여기서 변경된 내용이 화면에 새롭게 그려지기 이전 즉, 곧 실제 DOM이 변경되기 전에 React는 두 개의 가상돔을 비교해서 정확히 어떠한 부분이 변경되었는지 효율적으로 비교하고 파악합니다. 이러한 과정을 React에서는 Diffing이라고 부릅니다.

 

이 과정을 통해 변경된 부분을 파악한 이후, React는 집단을 한번에 업데이트하는 Batch Update를 수행함으 실제 DOM에 한번에 적용시켜줍니다. 이러한 과정을 React에서는 Reconsiliation(재조정)이라고 합니다.

 

이 글을 보고계신 분들이 비유를 통해 머릿속에 그려가며 이해해 나가는 부분이 조금이라도 도움이 되었으면 합니다.

 

 

참조 : 유튜브 별코딩