프론트엔드
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
두줄요약
React Query의 Suspense 옵션과 Error Boundary로 로딩·오류 UI를 선언적으로 분리했습니다.\n경계 구성으로 복잡한 비동기 화면의 유지보수와 UX 설계를 개선하는 방식을 소개합니다.
구조와 흐름
- React Query의
suspense옵션으로 비동기 데이터 요청을 Suspense 경계에 연결 - 상위 컴포넌트의 Suspense
fallback으로 로딩·스켈레톤 UI 구성 - Error Boundary와
react-error-boundary로 데이터 요청 실패 영역별 폴백 UI 구성 - 하위 컴포넌트는 데이터 존재를 전제로 화면 렌더링에 집중
선택 이유
- 상태별 조건 분기와 Props Drilling 감소를 통한 관심사 분리
- 비동기 요소가 많은 화면에서 영역별 로딩·에러 UX의 선언적 조합
- Suspense 경계 재배치만으로 동시 로딩 또는 개별 노출 정책 변경
성능/운영 포인트
lazy와 Suspense를 이용한 코드 스플리팅 번들 로딩 중 전체 스켈레톤 노출- Error Boundary 계층화로 기본 배너, 재시도 UI, 전체 오류 화면의 처리 범위 분리
- 치명적 API 오류에 UUID를 발급해 오류 추적과 고객센터 대응 연결
주의할 점
- 데이터 불러오기를 위한 Suspense와 React Query Suspense 옵션의 실험적 상태
- Suspense 누락 시 상위 경계의 폴백으로 전파되어 의도치 않은 전체 스켈레톤 노출 가능성
- Error Boundary 위치와 에러 재전파 규칙에 따른 폴백 범위의 세심한 설계 필요성
