1. Virtual DOM이란?
기존과 같이 DOM으로 직접 접근해 데이터를 조작하는 방식을 사용한다면 DOM을 조작할 때 마다 웹 페이지를 새로그리기 때문에 업데이트가 잦아지면 잦아질수록, web application의 규모가 크면 클 수록 DOM의 속도가 느려지는 성능 이슈로 이어졌다. 그래서 등장한 개념이 바로 Virtual DOM(가상 돔)이다. Virtual DOM은 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구상하여 사용하는 새로운 DOM tree이다. Virtual DOM은 기존에 DOM과 Virtual DOM을 비교해 변경된 부분만 실제 DOM에 적용시켜주어 DOM의 처리 횟수를 최소화 하고 효율적으로 진행 할 수 있게 해준다.
2. Virtual DOM의 동작방식
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM 업데이트 할 때의 절차는 다음과 같다.
- 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
3. Virtual DOM과 Real Dom의 차이
Virtual DOM과 Real DOM의 차이점는 Virtual DOM은 Real DOM처럼 HTML을 직접적으로 업데이트하지 않는다. 그렇기 때문에 DOM tree가 수정될때마다 Render tree가 갱신되는 Real DOM에 비해 메모리의 낭비가 적은 편이며 Virtual DOM은 새로운 element 가업데이트 되도 Virtual DOM을 생성후 이전 DOM과 비교해 차이점만 업데이트 하기 때문에 Real DOM에 비해 업데이트 속도가 빠르다.
3. 출처
리액트를 다루는 기술(김민준)
프론트엔드 개발자