가상 돔(Virtual DOM)이란
리액트 동작원리에 대해서 찾아보면 가상돔에 대한 이야기가 많이 나옵니다.
오늘은 가상돔(Virtual DOM)에 대해서 설명해보고자 합니다.
DOM이란
DOM은 Document Object Model (문서객체모델)의 약자입니다.
여기서 문서객체모델이란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미합니다.
즉 DOM은 HTML과 javascript를 이어주는 중간 다리 역할을 합니다.
DOM 렌더링 방식
여기서 기존 렌더링 방식은 아래와 같은 순서대로 이루워집니다.
- 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리를 생성
- 브라우저는 서버가 보내준 외부 CSS파일과 각 엘리먼트의 inline 스타일을 해석하여 CSSOM 트리 생성
- DOM 트리 + CSSOM 트리를 결합해 Render Tree 생성
- Render Tree로 각 노드의 위치와 크기를 계산한 레이아웃을 생성
- Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint)
가상돔이 나온 이유
DOM에 변화가 생기면 위와 같은 과정을 반복하기 때문에 렌더할 향이 많아지면 속도가 느려지고 잦은 오류를 발생시킬 수 있습니다. 전체적인 프로세스를 비효율적으로 만들기 때문에 가상돔이 빛을 발휘하게 됩니다.
가상돔(Virtual DOM)이란
가상돔(Virtual DOM)은 실제 DOM 문서를 추상화하고 자동화하는 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념입니다.
상태 변화로 뷰 포트를 업데이트 하기 전에 virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있습니다.
결론
알아본 결과 Virtual DOM 없이도 DOM에 대한 문제점을 해결할 수는 있습니다. 예로 DOM fragment를 사용하여 개발자가 변화된 값과 변화하지 않은 값을 수동적으로 비교하면서 DOM에 변경된 사항을 업데이트 할 수 있습니다.하지만 수동적으로 관리하는 것은 어려움이 있겠죠. 그래서 Virtual DOM을 이용해서 자동적으로 변화된 결과를 실제 DOM에 반영하고 메모리 누수를 줄일 수 있고 속도 면에서도 빠르게 보여줄 수 있기 때문에 큰 도움이 된다고 생각합니다.
