Fiber 기반 Reconciliation 프로세스를 통한 React UI 업데이트 최적화

Context

브라우저 DOM의 직접적인 조작은 높은 연산 비용을 발생시켜 빈번한 UI 업데이트 시 성능 저하 유발. 이를 해결하기 위해 메모리 내에서 가상 구조를 먼저 처리하는 효율적인 렌더링 메커니즘 필요.

Technical Solution

• Fiber 데이터 구조를 통한 UI 업데이트 프로세스의 내부 관리 및 처리 최적화
• Trigger 단계에서 Initial Render 및 State 변경 이벤트를 통한 렌더링 프로세스 개시
• Rendering 단계에서 Root부터 하위 컴포넌트까지 트리 순회 후 최신 UI 상태 기술서 생성
• Reconciliation 단계에서 이전 트리와 새 트리를 비교하는 Diff 알고리즘을 통한 최소 변경 사항 식별
• Commit 단계에서 Diff 결과물을 실제 DOM에 반영하고 useEffect 등 Lifecycle Hook 실행