Real DOM의 전체 리렌더링 비용을 최소화하는 Virtual DOM 기반의 부분 업데이트 전략

Context

HTML 문서를 트리 구조로 표현하는 Real DOM의 특성상 단순한 데이터 변경에도 전체 페이지를 다시 작성하는 비효율성 발생. 잦은 DOM 조작으로 인한 브라우저 렌더링 성능 저하와 사용자 경험의 단절이 주요 병목 지점으로 작용.

Technical Solution

• 메모리 상에 실제 DOM의 가벼운 복사본인 Virtual DOM 인터페이스 구축
• 상태 변경 시 전체 UI를 즉시 갱신하지 않고 메모리 내에 새로운 Virtual DOM 트리 생성
• 이전 상태의 Virtual DOM과 최신 상태의 트리를 대조하는 Diffing 알고리즘 적용
• 변경 사항이 발생한 최소 단위의 노드만 식별하여 Real DOM에 반영하는 Patching 프로세스 수행
• React의 useState 등 상태 관리 도구를 통한 효율적인 UI 버전 관리 체계 도입