Reconciler를 통한 불필요한 렌더링 제거 및 DOM 업데이트 최적화

Context

상태 변경 시 수천 개의 컴포넌트로 구성된 UI 트리 전체를 재렌더링하는 방식은 심각한 성능 저하를 유발함. 기존 프레임워크의 단순 비교 방식으로는 대규모 컴포넌트 트리에서 발생하는 연산 비용을 감당하기 어려운 한계가 존재함.

Technical Solution

• Root까지 이어지는 Flag 기반의 Trail을 생성하여 변경 사항이 없는 Subtree 전체를 즉각적으로 Skip 하는 구조 설계
• Reference Equality 기반의 Props 비교를 통해 메모리 주소가 동일한 컴포넌트의 실행을 생략하는 최적화 적용
• React.memo를 통한 Shallow Comparison 추가 단계 도입으로 Props 참조 변경 시에도 값의 동일성을 확인하여 렌더링 억제
• Element Type 비교를 우선순위로 두어 타입 변경 시 기존 DOM과 Fiber, State를 즉시 파괴하고 재생성하는 효율적 Diffing 수행
• Key prop을 활용한 리스트 아이템 추적 메커니즘으로 위치 변경과 상관없이 동일 요소의 상태를 유지하는 알고리즘 구현
• Render Phase와 Commit Phase를 분리하여 계산된 변경 사항을 단일 동기적 패스로 반영하는 Atomic 업데이트 구조 채택