React Query와 함께 Concurrent UI Pattern을 도입하는 방법

카카오페이 프론트엔드 개발자들은 React 18의 정식 릴리즈 이전 단계에서 Concurrent UI Pattern을 실험적으로 도입하여 프로젝트에 적용하고 있다. 이는 기존 명령형(Imperative) 방식에서 선언형(Declarative) 방식으로의 전환을 의미하며, React Query를 활용해 비동기 데이터 로딩과 에러 처리를 간소화하는 사례를 다룬다.

명령형에서 선언형으로의 전환

기존 명령형 컴포넌트는 useState와 useEffect를 사용해 로딩 상태(isLoading)와 에러 상태(error)를 직접 관리하고, 조건부 렌더링으로 UI를 제어했다. 반면 선언형 컴포넌트는 UI가 '무엇(WHAT)'을 보여줄지에 집중하며, Suspense와 Error Boundary를 통해 상황에 맞는 UI를 자동으로 표시한다.

• Suspense: 비동기 데이터 로딩 중일 때 fallback으로 지정된 컴포넌트(예: Spinner)를 렌더링한다.
• Error Boundary: 하위 컴포넌트 트리의 JavaScript 에러를 포착하여 폴백 UI를 보여주고 에러를 리포팅한다.

React Query를 통한 구현

카카오페이 팀은 React Query의 useQuery 훅 옵션을 활용하여 이 패턴을 구현했다. suspense: true 옵션을 설정하면 useQuery가 Suspense를 지원하는 특별한 객체로 동작하며, 데이터가 준비될 때까지 상위 Suspense가 로딩 화면을 담당한다. 또한 useErrorBoundary: true 옵션(기본값)을 통해 에러 발생 시 Error Boundary가 이를 처리하도록 구성했다.

• react-error-boundary 라이브러리를 사용해 에러 복구 버튼(resetErrorBoundary)과 에러 메시지 표시를 쉽게 구현했다.
• 현재 비동기 데이터용 Suspense는 실험적 기능(Experimental)이므로 운영 환경 적용 시 주의가 필요하다.