useEffect 탈피, React 19 use()로 구현하는 선언적 데이터 페칭

Context

useEffect 기반 데이터 페칭의 반복적인 보일러플레이트 코드 발생. 부모 컴포넌트 렌더링 후 자식 페칭이 시작되는 Request Waterfall 현상 심화. 개발자마다 상이한 로딩 및 에러 처리 방식으로 인한 일관성 없는 사용자 경험.

Technical Solution

• Promise와 Context를 렌더링 단계에서 직접 읽어내는 use() API 도입
• Promise 미해결 시 컴포넌트를 일시 중단하고 가장 가까운 Suspense 경계로 제어권을 위임하는 설계
• Promise 거부 시 에러를 가장 가까운 Error Boundary로 전파하여 렌더링 오류와 동일한 메커니즘으로 처리
• Hook 규칙을 따르지 않는 API 설계로 조건문, 반복문, Early Return 이후 호출이 가능한 유연성 확보
• 중첩된 Suspense 경계를 통해 각 섹션별 독립적인 로딩 상태를 구현하여 데이터 도착 순서대로 화면에 표시하는 전략
• Server Components 및 프레임워크 수준의 데이터 로더와 결합하여 렌더링 시점의 데이터 읽기 최적화

Key Takeaway

데이터 페칭의 생명주기 관리 책임을 컴포넌트 내부 상태가 아닌 React 런타임과 Suspense 경계로 이전하여 비즈니스 로직과 UI 상태 관리를 완전히 분리함.