Virtual DOM에 대해 설명해주세요.

최관수·2023년 9월 15일

기술면접

목록 보기

32/58

Virtual DOM은 말 그대로 가상 DOM으로 최근 React나 Vue 같은 프레임워크에서 주로 사용하는데, 여기서의 랜더링은 화면 단에서 그려지는 변경사항을 별도의 가상 DOM에 모아놨다가 DOM으로 보내서 한번에 랜더링을 진행합니다. 이런 방식은 DOM 조작을 최소화해서 성능을 향상시키는 데에 목적을 두고 있다고 볼 수 있습니다.
기본적으로 크리티컬 랜더링 패스(Critical Rendering Path)라고 부르는 랜더링 과정(DOM, CSSOM, 랜더트리, 레이아웃, 페인팅 등)에서 특히 리플로우(reflow)나 리페인팅(repainting)에서 비싼 연산을 차지하게 되는 것으로 알고 있습니다. React 내에 가상 DOM을 조작하거나 diffing 알고리즘을 처리하는 Render phase에서 이전의 VDOM(current 트리)과 새롭게 랜더링될 VDOM(workInProgress 트리)을 diffing 즉, 비교하고, commit phase에서 비교을 통해 변경된 부분을 실제 DOM에 반영하는 reconciliation이라고 부르는 재조정 과정을 수행하는데, 그 과정에서 사용되는 게 가상 DOM이라고 볼 수 있습니다.

일반 DOM을 조작하는 거에 비해 Virtual DOM 조작하는 게 더 빠른가요?
Vue와 React의 가상 DOM을 이용하는 방식의 차이에 대해 아는 대로 설명해주실 수 있나요?
- 대표적으로 Vue는 양방향 바인딩을 사용하고 React는 단방향 바인딩을 통해 가상 DOM을 이용합니다. 그 외에 가상 DOM을 조작하는 메소드의 차이가 있는 것으로 알고 있습니다.
DOM의 업데이트 주기를 직접 설정할 수 있나요?
Vanilla JS에서 가상 DOM 생성 및 사용할 수 있나요?

평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.