가상(Virtual) DOM

“react 에서의 virtual DOM”

→ UI 의 가상적인 표현을 메모리에 저장하고, ReactDOM 과 같은 라이브러리에 의해 실제 DOM 과 동기화 (이를 재조정이라고 부른다)

나오게된 배경

브라우저 랜더링 시에 어떠한 인터렉션에 의해 DOM 에 변화가 발생하면 render tree 가 재생성된 다는 것, 변화가 발생하면 모든 요소들의 스타일을 다시 계산하고, reflow 과정을 거쳐 다시 repaint 까지 발생되기 때문에 (전체 노드들이 다시 그려지는 ) DOM을 조작하면 소모적인 비용이 많이들고 시간도 오래걸림

SPA (페이지를 서버가 아닌 브라우저에서 관리해 주는 페이지를 변경하지 않고 동일한 페이지에서 변경되기 떄문에 DOM 을 조작할 일이 많아지기도 했다)

특징

• 실제 DOM object 과 같은 속성들을 가지고 있지만, 실제 DOM이 가지고 있는 api는 가지고 있지 않다
• html 객체에 기반한 자바스크립트 객체로 표현 가능

→ 이러한 처리들은 실제 DOM이 아닌 메모리 상에서 동작하기 때문에 빠르게 동작 , 실제 렌더링 되지 않아서 연산 비용이 적다 (모든 변화를 묶어서 딱 한번에 실행)

• DOM fragment 의 변화를 묶어서 적용한 다음 기존 DOM 에 던져주는 과정을 자동화 추상화 해논 것이다 !

변화가 일어나면 실제로 브라우저의 돔에 새로운 것을 넣는게 아니라 자바스크립트로 이루어진 가상의 돔에 한 번 렌더링을 하고 기존의 돔과 비교를 한 다음에 정말 필요한 곳에만 업데이트를 해주는 것

결론

그렇다면 무조건 Virtual DOM 이 좋은것일까?

정보만 제공하는 웹 페이지라면 인터랙션이 발생하지 않기 때문에 일반 DOM 의 성능이 더 좋을 수 있다

SPA 로 제작된 큰 규모의 웹 페이지에서는 Virtual DOM 을 사용해서 브라우저의 연산 양을 줄여 성능을 개선할 수 있다