Virtual DOM에 대해 정리해 보는 시간

 

DOM, Virtual DOM 등.. 줏어 들어보긴 했지만 누군가 설명하라고 한다면 머뭇거리게 되는 개념이지요 (^^) 훗훗

 

우선 DOM이란 무엇일까요? 

처음 HTML을 공부할때 DOM tree를 잘 알아야 한다, DOM, node 등등의 중요성에 대해 많이 줏어 들었는데요. 

 

 

🦖 DOM이란? 

Document Object Model의 줄임말 입니다. 말그대로 문서객체모델이지요.

HTML의 각 요소들(element)을 tree 형태로 표현한 것을 DOM이라고 하는데요. 

 

아래 구조를 보면 더 쉽게 이해할 수 있습니다. 하나의 root(뿌리)에서 여러가지 요소들이 가지를 친 것 같은 모습이죠.

DOM tree안에는 각각의 element에 상응하는 Node가 들어 있는데요, 개발자들은 DOM구조에 접근을 하고 원하는 element를 쉽게 조작할 수 있죠. 

흔히 getElementById, querySelector와 같은 API를 통해 돔 구조안의 element에 접근하여 내가 원하는대로 내용, 스타일, 레이아웃 등을 수정할 수 있습니다. 

 

 

 

 

 

🦖 DOM 동작 원리 

 

그렇다면 DOM은 어떻게 동작되는 것일까요? 

 

 

브라우저가 HTML을 전달 받으면, 이를 변환하고 노드들로 이루어진 DOM 트리를 만듭니다. 그 후 CSS나 각 노드들의 inline 스타일을 변환하여 스타일을 추가로 입힌 Render 트리를 만들죠. 

 

Render 트리가 만들어지면 각각의 노드들이 화면에서 어디에 나타나야 하는지 위치가 주어지고, 그 후 내가 구현하고 싶었던 화면이 출력 되는데 DOM은 해당 과정을 계속 반복합니다. 오타 수정, 문구 제거 등 간단한 일을 하더라도 DOM은 처음부터 다시 HTML을 변환하고.. DOM트리를 만들고.. CSS파싱하고.. 노예처럼 계속 같은 일을 반복하는 거죠. 

 

현재 대부분의 웹 사이트는 수 십개 심지어 수 백개, 수 천개의 페이지로 이루어져 있는데 겨우 오타 하나를 잡으려고 전체 사이트를 처음부터 랜더링 하는 것은 너무나 비효율적이지요. 그래서 Virtual DOM이 탄생하게(?) 되었습니다. 

 

 

🦖 Virtual DOM이란? 

Virtual DOM은 수정사항이 여러가지 있더라도, 가상 DOM은 한 번만 랜더링을 일으킵니다. 

Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 쉬운데요. 그렇기 때문에 실제 DOM의 모든 element과 속성을 공유합니다. 

 

Virtual DOM에 적용하는 변경사항은 DOM에 바로 반영되지 않습니다. 다만 그 변경사항들을 모아두었다가, 한 번에 DOM에게 보냅니다. 그러면 DOM은 업데이트를 딱 한 번만 하고, 렌더도 한 번만 일어나게 되는거죠. 

 

 

🦖 React의 탄생

이러한 Virtual DOM의 대유행을 유발한 라이브러리가 등장하는데 그게 바로 React 입니다. 

리액트를 만든 Facebook에서는 데이터가 바뀔 때마다 전부 다 싹 다 다시 그려 버리자는 새로운 발상을 하게 되었고, 모든 것을 Virtual DOM에 새로 그리고 기존과 비교했을 때 변경된 부분만 DOM에 한 번에 보내버리자는 방식을 구현하게 됩니다. 

 

우리가 리액트로 코드를 짤 때 key값을 잘 넣어 주어야 하는데, 이것은 Virtual DOM과도 깊은 연관성이 있답니다. (더 공부한 후에 포스팅에 다루어 볼게욧 (?)) 

 

이렇게 공부하다보니 Virtual DOM의 성능이 굉장히 좋다는 생각이 드는데, 대부분의 상황에서 Virtual DOM은 사실 빠르지 않습니다. 

DOM을 바로 조작하는 것 보다 느린 경우가 더 많지만, 극소수의 상황에서는 더 효율적이지요. 

그러나 봐줄만한(?) 성능이기 때문에 Virtual DOM을 이용한 리액트를 사용하는 것이 아닐까라는 생각을 해보며.. 이만 총총