1.2.1.2 Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 마치 실제 DOM의 가벼운 사본과 비슷하죠.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟습니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

3. 바뀐 부분만 실제 DOM에 적용합니다.

이전 절에 있던 그림을 다시 복습해 볼까요? 여기서 오른쪽의 ‘새로운 DOM 트리’가 바로 Virtual DOM입니다.

▲ 그림 1-9 두 DOM 비교