Virtual DOM은 실제 DOM의 가벼운 JavaScript 객체 표현으로, 효율적인 UI 업데이트를 가능하게 합니다.
React는 상태가 변경되면 새로운 Virtual DOM 트리를 생성하고, 이전 트리와 비교(Diffing)하여 실제로 변경된 부분만 Real DOM에 반영합니다. 이 과정을 재조정(Reconciliation)이라 하며, O(n) 복잡도의 휴리스틱 알고리즘으로 동작합니다. 덕분에 개발자는 선언적으로 UI를 작성하면서도 높은 성능을 유지할 수 있습니다.
단계별로 진행하며 Virtual DOM이 어떻게 변경 사항을 감지하고 최소한의 DOM 조작으로 업데이트하는지 확인하세요.
실제 코드로 동작 원리를 확인하세요.
// Virtual DOM은 실제 DOM의 가벼운 JS 객체 표현입니다
const vNode = {
type: 'div',
props: { className: 'container' },
children: [
{
type: 'h1',
props: {},
children: ['Hello World']
},
{
type: 'p',
props: { style: { color: 'blue' } },
children: ['Virtual DOM은 빠릅니다']
}
]
};
// React.createElement가 이런 객체를 생성합니다
// JSX → React.createElement() → Virtual DOM 객체
const element = <div className="container">
<h1>Hello World</h1>
</div>;
// 내부적으로 위와 같은 JS 객체가 됩니다선언적 UI를 작성할 수 있어 생산성이 향상됩니다.<div>에서 <span>으로 바뀌면 전체 서브트리를 교체합니다. 2. key prop으로 자식 요소의 안정적 식별이 가능합니다 — 같은 key를 가진 요소는 동일한 요소로 인식하여 재사용합니다. 비교는 루트부터 재귀적으로 진행되며, 같은 타입이면 속성만 비교하고 다른 타입이면 전체를 교체합니다.key는 React가 리스트의 각 요소를 고유하게 식별하는 데 사용됩니다. key가 없거나 index를 key로 사용하면, 리스트 중간에 요소가 삽입/삭제될 때 뒤의 모든 요소가 변경된 것으로 인식되어 불필요한 리렌더링이 발생합니다. 고유한 id를 key로 사용하면 React가 정확히 어떤 요소가 추가/삭제/이동되었는지 파악하여 최소한의 DOM 조작만 수행합니다.