가상돔 (Virtual DOM)과 리얼돔 (Real DOM)의 차이

버츄얼 돔과 리얼 돔의 차이가 무엇인가?

 

리얼돔은 자바스크립트로 DOM에 직접 접근하여 웹페이지 요소를 선택하여 변경할 수 있습니다. 리얼 DOM구조 자체를 변경하여 리렌더링 시키기 때문에 많은 요소가 자주 업데이트 되는 경우 브라우저 리플로우와 리페인트가 발생하여 화면이 지연되거나 깜빡이는 현상이 발 생할 수 있습니다.

반면 가상돔은 메모리에 상에만 존재하는 가벼운 복사본으로 리얼돔과 동기화되는 방식으로 동작하며 리액트는 가상돔을 활용해 효율적인 UI 업데이트를 관리합니다. 가상돔 업데이트는 리얼돔조작을 최소화 하여 성능을 향상시킵니다.

 

참고 답변

: 리얼 돔(Real DOM)은 웹 페이지의 실제 구조를 나타내는 HTML 요소들의 트리 구조를 의미합니다.버츄얼 돔(Virtual DOM)은 리액트(React)와 같은 프론트엔드 라이브러리에서 사용되는 가상의 돔 구조입니다. 사용자가 웹 페이지에서 정보를 접근하거나 수정할 때, 리얼 돔은 변경 사항을 처리하기 위해 전체 페이지를 다시 렌더링해야 합니다. 이러한 작업은 성능상의 단점을 발생시킬 수 있습니다. 그렇기 때문에 메모리 상에서 관리되는 버츄얼 돔으로 상태 변화를 리얼 돔에 바로 반영하지 않고 하나로 모아서 batch update를 하여 Diffing 과정을 거쳐 비용을 최소화 시킵니다.