우선 DOM에 대해 알아보자
DOM(Document Object Model)은 문서의 구성 요소들을 객체로 구조화하여 나타낸 것 입니다.
웹 페이지의 내용(HTML element들)을 구조화(Tree 형태로)해서 프로그래밍적으로 제어할 수 있도록 API를 제공하는 일종의 인터페이스 입니다.
저희가 요소에 onClick 등과 같은 이벤트를 설정할 수 있는게 다 DOM 덕분입니다.
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. -mdn
Virtual DOM(VDOM) 이란?
Virtual DOM은 실제 DOM을 그대로 복사해서 사용되는 가상의 DOM 객체입니다.
Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하시면 쉽습니다. 복사본은 실제 DOM이 아닌 JS 객체형태로 메모리 안에 저장되어 있습니다.
Virtual DOM은 왜 생기게 되었을까?
기술이 발전할수록 웹의 복잡도가 점차 증가했고, DOM 조작이 점점 빈번하게 일어나게 되었습니다.
DOM은 변경사항이 있을때마다 새로 렌더를 하는데 만약 1000번의 변화가 생기면 렌더링도 그만큼 새로 한다는 것이었습니다.
DOM 조작이 많이 발생하게 되면 그만큼 렌더링도 많이 하기 때문에 PC자원을 많이 소모하게되어서 비효율적이었습니다.
이 비효율적인 DOM의 렌더링을 막기 위해 Virtual DOM이 탄생하게 되었습니다.
그럼 Virtual DOM이 더 빠른고 좋은건가요?
DOM 자체는 느리지 않습니다. 오히려 Virtual DOM이 하나의 과정을 더 거치기 때문에 DOM보다 느립니다.
하지만 웹브라우저 단에서 DOM에 변화가 일어나면 브라우저가 렌더링 되는 과정에서 시간이 허비되는 것입니다.
그리고 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고, 많은 작업을 수행하다가 버그가 발생하거나 브라우저가 죽는 등의 일을 개선하고자 Virtual DOM이 생기게 된 것 입니다.
Virtual DOM의 동작 원리
-
현재 DOM을 복사 해 가상 돔을 생성한다.
-
DOM에 대해 변경사항이 생기면 새로운 버전의 가상 돔을 생성한다.
-
이전 가상 돔의 내용과 현재 생성된 가상 돔의 내용을 비교한다. -> diffing이라고 부른다.
-
바뀐 부분만을 실제 DOM에 적용한다.
참고 자료
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://www.tcpschool.com/javascript/js_dom_concept
https://velog.io/@woohm402/virtual-dom-and-react
https://dev-cini.tistory.com/10
https://velog.io/@ctdlog/React-DOM%EC%9D%B4%EB%9E%80-Virtual-DOM%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0#%EA%B7%B8%EB%A0%87%EB%8B%A4%EB%A9%B4-%EA%B0%80%EC%83%81-%EB%8F%94virtual-dom%EC%9D%B4-%EB%82%98%EC%98%A4%EA%B2%8C-%EB%90%9C-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb
