가상 돔(virtual DOM)
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
가상 돔(Virtual DOM, VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
virtual DOM은 실제 존재하는 DOM이 아닌 컴퓨터 메모리 상에서만 존재하는 가상의 DOM을 뜻한다.
React에선 상태(state)가 업데이트 되면, 변경 사항이 모두 적용된 전체 UI를 새로운 virtual DOM에 렌더링 한다. 그리고 업데이트 이전 버전의 virtual DOM과 새로 생성된 virtual DOM을 서로 비교하여, 차이점이 있는 부분만을 실제 웹 브라우저의 DOM에 적용 한다. 이 과정을 재조정(reconciliation)이라고 한다.
이는 데이터가 지속적으로 변화하는 동적인 웹 애플리케이션에서 큰 성능 향상을 기대 할 수 있는데, 브라우저 렌더링 과정 중 레이아웃 계산과 페인팅을 다시 실행하는 리렌더링은 비용이 가장 많이 드는 작업이기 때문이다.
React에서의 가상 돔 활용
React는 SPA(싱글 페이지 어플리케이션, single page application) 방식을 사용한다. 다만 데이터의 변화로 리렌더링이 자주 발생하는 CSR 특성 상 브라우저의 성능 이슈를 피할 수 없다.
따라서 React는 돔 조작이 빈번한 SPA에서 성능 이슈를 해결하기 위해 virtual DOM을 사용한다.
Reference
spig0126.log
https://velog.io/@spig0126/SPASingle-Page-Application%EB%9E%80
개발자 단민
https://velog.io/@spig0126/SPASingle-Page-Application%EB%9E%80
한 입 크기로 잘라 먹는 리액트
이정환 저자(글) · 인사이트 · 2023년 04월 06일
