Suspense와 선언적으로 Data fetching처리
프론트엔드
Suspense와 선언적으로 Data fetching처리
두줄요약
Suspense로 Promise 기반 비동기 작업과 fallback 렌더링을 선언적으로 연결했습니다. 경쟁 상태·워터폴·결합도를 줄이는 컴포넌트 구성을 설명합니다.
문제 상황
useEffect기반 Fetch-on-render의 경쟁 상태와 로딩 동기화 코드- 부모 데이터 조회 완료 뒤 자식 조회가 시작되는 Waterfall 문제
- Fetch-then-render에서 비동기 처리 집중에 따른 컴포넌트 결합도 증가
원인 분석
- 컴포넌트 렌더링 생명주기와 비동기 작업 생명주기의 분리
- 로딩 상태를 각 컴포넌트에서 직접 제어하는 동기화 책임
- 데이터 조회를 상위 컴포넌트에 모으는 방식의 역할 경계 붕괴
해결 방법
- pending 상태의 Promise를 throw하고 Suspense fallback으로 로딩 UI 렌더링
- Promise fulfilled 뒤 Suspense children 재렌더링
- react-query의
suspense: true로 컴포넌트별 데이터 조회와 Suspense 연동
주의할 점
- Suspense만으로 모든 비동기 작업 처리 문제 해결 불가
- 무분별한 Suspense 사용에 따른 부정적 영향 가능성
