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

카카오페이 FE인프라TF에서 React Query를 활용하여 Concurrent UI Pattern을 도입한 경험을 공유하는 글입니다. Concurrent UI Pattern은 React의 Suspense와 Error Boundary를 사용하여 사용자 경험을 향상시키는 패턴으로, 특히 다양한 접속 환경과 인터넷 속도에 따른 UI 렌더링 문제를 해결하는 데 중점을 둡니다.

글에서는 이러한 패턴을 React Query와 함께 적용하여 선언형 컴포넌트로 쉽게 구현하는 방법을 설명하며, Relay 예제 프로젝트를 참고 자료로 제시합니다. 궁극적으로 사용자 경험 개선을 위한 기술적 접근 방식을 다룹니다.