핵심 요약
카카오엔터테인먼트가 Suspense를 활용한 선언적 데이터 페칭 처리 방식을 소개합니다. React의 Fetch-on-render, Fetch-then-render, Render-as-you-fetch를 비교하고 경쟁 상태와 Waterfall 문제를 지적한 뒤, Suspense로 비동기 작업과 렌더링을 동시 시작하는 방식의 이점을 제시합니다.
구현 방법
- Suspense를 도입해 Pending 시 예외를 던져 렌더링 흐름을 제어
- 각 컴포넌트가 독립적으로 데이터 페칭
- Fallback 렌더링으로 초기 상태를 선언적으로 표시
- react-query 등 서버 상태 라이브러리와의 연동이 용이해짐
주요 결과
- 동시성 확보로 경쟁 상태 관리 복잡도 감소
- 컴포넌트 간 역할 분리 및 가독성 향상
- 서버 상태 라이브러리와의 연동이 수월해짐
