Real DOM 직접 조작의 오버헤드를 Virtual DOM과 Reconciliation로 해결한 UI 렌더링 최적화

Context

웹 애플리케이션의 복잡도 증가로 인한 잦은 UI 업데이트가 Real DOM의 Repainting 및 Reflow 비용을 증가시킨 상황. 전체 DOM Tree를 재구성하는 브라우저의 동작 방식이 대규모 노드 처리 시 심각한 성능 병목으로 작용.

Technical Solution

• JavaScript Object 기반의 가벼운 복제본인 Virtual DOM을 도입하여 메모리 내 렌더링 처리
• State 또는 Props 변경 시 새로운 Virtual DOM Tree를 생성하는 Rendering 단계 수행
• 이전 Virtual DOM과 새 Tree를 비교하여 변경된 노드만 식별하는 Diffing 알고리즘 적용
• 최소한의 변경 사항만 Real DOM에 반영하는 Patching 과정을 통한 브라우저 부하 감소
• Key 값을 통한 요소 식별로 리스트 업데이트 시 불필요한 재생성을 방지하는 최적화 구현
• Declarative approach를 채택하여 개발자가 상태 변화에만 집중하고 DOM 동기화는 React가 관리하는 구조 설계