DOM이란?
Document Object Model의 약자로, 문서 객체 구조를 표현하는 방식
DOM은 동적 UI에 최적화되어 있지 않다. 그렇기 때문에 DOM 자체는 빠르지만, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 많은 시간이 소요된다. 따라서 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 발생하기 시작한다.
해결법
성능 저하를 해결하기 위해 DOM을 최소한으로 저작하여 작업을 처리하는 방식으로 개선할 수 있다. 그것이 바로 Virtual DOM 방식이다.
Virtual DOM
리액트에서는 실제 DOM에 접근하여 조작하는 대신, DOM을 추상화한 자바스크립트 객체 Virtual DOM을 구성하여 사용한다. 이를 통해 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행할 수 있다.
DOM 업데이트의 3가지 절차
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
- 이전 Virtual DOM에 있던 내용과 현재 내용 비교
- 바뀐 부분만 실제 DOM에 적용
