Main-thread 차단 최소화를 통한 INP 200ms 이하 달성 전략

Context

React 앱의 과도한 JavaScript 번들 크기와 Hydration 비용으로 인한 메인 스레드 점유율 상승 문제 발생. 사용자의 상호작용 후 다음 프레임 렌더링까지의 지연 시간이 증가하여 UI 응답성이 저하되는 한계점 노출.

Technical Solution

• Event Handler 내부의 동기적 무거운 연산(Filtering, Sorting)을 제거하고 Precompute 또는 Chunking 기법을 적용한 비동기 처리 구조 설계
• 전역 상태 변경에 따른 불필요한 Render Storm 억제를 위해 상태를 지역화(Local State)하고 Virtualization을 통한 렌더링 대상 컴포넌트 수 제한
• Hot Path 상의 컴포넌트에 대해 Memoization을 적용하고 Stable Props를 유지하여 리렌더링 비용 최적화
• Content 중심 페이지에서 Client Component 전환을 최소화하고 Server-rendered 구조를 유지하여 Hydration 부하 감소
• Third-party Script의 로딩 시점을 Idle 상태 이후로 Defer 하여 상호작용 시점의 메인 스레드 간섭 배제