Virtual Dom
리액트 가상 돔에 대해 다룰 페이지
Intro
리액트가 가진 많은 장점 중 하나는 빠르고 효율적인 화면 업데이트를 통해 사용자에게 좋은 경험(UX)을 제공한다는 점입니다. 이처럼 변화가 많은 웹 화면에서도 끊김 없는 렌더링을 가능하게 해주는 핵심 기술이 바로 Virtual DOM입니다.
1. Real DOM의 렌더링 방식
웹 브라우저가 HTML페이지의 각 태그들을 파싱하여 순서에 맞게 저장해둔 객체를 DOM이라고 불렀습니다. 웹 브라우저는 이 DOM구조에 변화가 생기면 실제 HTML페이지에 변화된 내용을 반영(렌더링)하도록 설계 되어 있습니다.
RealDom의 렌더링
2. Virtual Dom
리액트는 웹페이지 로딩이 완료된 후 생성된 Real Dom을 그대로 모방한 Virtual Dom을 생성합니다.
Virtual DOM은 Real DOM과 유사한 구조를 가진 메모리 상의 객체입니다. 하지만 Virtual DOM에 가하는 수정사항은 브라우저에 직접적으로 반영되지 않으며, 화면에 그려지지도 않습니다. 이는 변경사항을 먼저 시뮬레이션하고, 실제 DOM에 반영할 최소한의 변경사항만 찾아내기 위한 도구로써 설계 되었기 때문입니다.
1) React의 렌더링방식
React는 상태나 props 등의 변화가 생기면 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교(diffing)합니다. 이 차이를 기반으로 Real DOM에 적용할 최소한의 변경사항만 찾게 됩니다.
이 과정을 React에서는 Reconciliation(재조정) 이라고 부릅니다. 이는 Virtual DOM 간의 비교(diffing)와, 그 차이를 Real DOM에 반영하는 업데이트 단계를 포함합니다. 이를 수행하는 핵심 내부 엔진은 Reconciler로 불리며, 효율적이고 최적화된 업데이트를 담당합니다.
2) React의 렌더링
3) 비교
기존 브라우저는 DOM 구조에 변화를 감지하더라도 어떤 부분이 바뀌었는지 비교하지 않습니다. 그 결과 불필요한 부분까지 모두 다시 렌더링하게 되어 성능 저하로 이어질 수 있습니다.
이 문제를 해결하기 위해 등장한 개념이 바로 Virtual DOM입니다.
Last updated