Virtual DOM 을 이해하기 위해서는 DOM(Document Object Model) 부터 이해해야합니다.
DOM(“Document Object Model”) 이란?
•
하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 모델
•
DOM은 브라우저에서 다룰 HTML 문서를 파싱하여 "문서의 구성요소들을 객체로 구조화하여 나타낸 것"입니다.
•
DOM은 HTML Elements, Attributes, CSS styles, Events, Methods 등을 제어할 수 있는 표준 인터페이스를 제공합니다.
•
"웹 페이지 구성 요소를 구조화한 객체고 이 객체를 이용해서 웹 페이지 구성요소를 제어할 수 있다"
Virtual DOM 이란?
1. Virtual DOM이란?
→ "DOM을 추상화한 가상의 객체"
•
Virtual DOM 은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 합니다.
•
React 에서는 Virtual DOM 을 활용해서 직접 DOM 을 수정하지 않고, 업데이트 해야할 최소 부분만 찾아서 업데이트하는데 활용합니다.
2. 왜 Virtual DOM 이 나오게 되었을까?
1.
문제: DOM 조작에 의한 비효율적인 렌더링
2.
문제: SPA(Single Page Application) 구현으로 인해 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워짐
DOM을 직접 조작하면 브라우저가 자주 렌더링 되고, PC 자원을 많이 소모하게되는 문제를 해결하기 위한 기술
// 자바스크립트로 DOM에 접근하여(메서드를 이용해서) 내용을 바꾸거나 스타일을 바꿀 수 있습니다.
// jQuery 를 이용해서 DOM의 메서드로 DOM의 내용을 바꾸었고 DOM이 변경을 인지한 브라우저 엔진은 다시 렌더링하였습니다.
document.getElementById("hello").innerHTML = 'hello world!'
document.body.style.background = 'blue'
JavaScript
복사
3. 브라우저 렌더링 방법
DOM을 반복 조작하면 렌더링도 자주하는데, 브라우저의 렌더링 방식 때문입니다.
1.
HTML을 파싱하여 ’DOM 객체’를 생성하고, CSS를 파싱하여 ’스타일 규칙’을 만듭니다.
2.
‘DOM 객체’ 와 ‘스타일 규칙’을 합쳐 실제 웹 브라우저에 보여질 요소를 표현한 ’렌더 트리’ 를 생성합니다.
3.
이 ‘렌더 트리’를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 합니다.
문제가 되는 경우는 지금의 웹처럼 변경해야할 대상도 많고 변경도 많은 경우입니다.
프로그래밍에 의해 DOM의 변경할 구성 요소가 n개면 위의 과정을 n번을 반복하는 비효율적인 작업을 했습니다.
DOM을 변경하는게 문제라기보다, 렌더링을 여러번 하는게 문제입니다.
물론 브라우저라고 설명한대로 n번 렌더링하지 않습니다.
“Batched DOM Update”: DOM을 제어하는 메서드에 따라서 다르지만 어느정도 배치 형태로 작업을 할 수 있습니다.
“Batched DOM Update” 를 활용해서 렌더링을 줄였다고 해도 여전히 비효율적인 것은 사실입니다.
4. 기존 DOM 의 비효율을 해결하는 Virtual DOM 의 역할은?
•
Virtual DOM이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓습니다.
•
Virtual DOM은 DOM과 유사한 역할을 담당할 객체입니다.
•
즉, 변경 사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 했습니다.
•
Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후, 구성요소의 변경이 부분을 찾아 변경하고 한 번만 렌더링해서 해결했습니다.
https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html
•
만약 어떤 게시판에서 다음 페이지를 눌러 리스트 10개(<ul>태그안의 <li>태그)를 변경하는데 DOM에 접근하여 <li>10번을 바꾸지 않고 Virtual DOM을 통해 리스트 10개(<li>태그)를 변경하고 Virtual DOM과 실제 DOM을 비교하여 변경된 부분(<ol>통채로)을 1번만에 변경하여 렌더링도 1번만 일어나게 하는 것입니다.
•
실질적인 DOM관리를 Virtual DOM이 하게됩니다.
5. 주의사항과 한계
•
0.1초마다 화면에 데이터가 변경된다면? Virtual DOM으로 0.5초씩 모아가지고 렌더링을 적게할 수 있을까?
→ 안된다. 동시에 변경되는 것에 한해서만 렌더링된다.
•
React나 Vue등을 이용해서 Virtual DOM을 쓰면 무조건 빠른가?
→ 아니다. 똑같이 최적화를 해야한다. (슬라이드를 옮기거나 무한 스크롤등의 움직임이 있을 때는 Virtual DOM을 이용해서 반복 렌더링을 하지 않도록 해줘야한다.)
•
DOM에 준하는 무거운 객체(Virtual DOM)가 메모리에 있기 때문에 메모리 사용이 늘어날 수 밖에 없다.
•
Virtual DOM 을 통해 많은 컴포넌트를 조작하면 마찬가지로 오버헤드가 생긴다. Virtual DOM 제어가 DOM 직접 제어에 비해 상대적으로 비용이 적게 들 뿐이다.
