크린토피아 수거배달 모바일 앱 구축에서, 우리는 전통적인 데이터 패칭 방식을 React Query로 전환하여 앱 성능과 개발 생산성을 대폭 향상시켰습니다. 이번 프로젝트에서 React Query가 가져온 4 가지 핵심 기능을 중심으로 기술 포트폴리오 시각에서 정리합니다.

1. 자동 캐싱 및 상태 동기화

React Query는 요청한 데이터를 캐시(cache)하여, 여러 컴포넌트에서 동일한 데이터를 공유하고 상태를 일관되게 유지하도록 돕습니다. 예를 들어, 수거 예약 현황, 배송 위치 정보, 사용자 프로필 등을 한 번 불러온 뒤, 이후에는 캐시된 데이터를 즉시 표시합니다.

• 중복 요청 방지: 동일한 API를 여러 컴포넌트에서 요청해도, React Query는 캐시된 결과를 활용해 네트워크 호출을 줄여줍니다.

• 구조적 공유(structural sharing): 변경되지 않은 데이터는 재사용하여 불필요한 렌더링을 줄입니다.

• 상태 일관성 유지: 캐시된 데이터를 여러 화면에서 참조하여 동일한 UI 상태를 보장합니다.

이 덕분에 사용자는 앱을 빠르게 사용할 수 있고, 개발자는 useState + useEffect 기반의 복잡한 상태 관리 코드를 줄였습니다.

2. 백그라운드 데이터 갱신

React Query는 백그라운드 자동 갱신을 통해, 앱 UI에 항상 최신 정보를 제공합니다.

• refetchOnWindowFocus, refetchInterval 등의 설정을 통해: 앱이 포그라운드로 돌아올 때 일정 주기(예: 60초)마다 현황 데이터를 자동 갱신합니다.

• [활용 예시] 배달기사 위치: 작업 중에도 실시간 위치를 갱신해 사용자에게 최신 수거 상태를 보여줍니다.

결과적으로 실시간성이 강화되고, 사용자의 앱 체감이 크게 향상되었습니다.

3. 로딩 / 에러 / 성공 상태 자동 관리

React Query는 isLoading, isError, isSuccess 등의 상태 플래그를 기본 제공하여 UI 상태 제어를 직관적으로 처리합니다.

• isLoading: 네트워크 호출 중 로더 표시

• isError: 에러 메시지와 재시도 버튼 표시

• isSuccess: 데이터 정상 표시

이러한 상태 관리 기능 덕분에, 복잡한 useState + useEffect 로직이 사라지고 간단하게 처리가 가능하였습니다.

const { data, isLoading, isError } = useQuery('KeyName', fetchKeyName);

4. 개발 및 디버깅 도구 제공

React Query Devtools는 쿼리 상태, 캐시 데이터, refetch 타이밍 등을 시각화하여 디버깅과 성능 최적화가 용이하도록 돕습니다.

• 쿼리 히트맵: 어떤 쿼리가 호출되고 있는지 확인 가능

• 캐시 탐색기: 저장된 데이터와 생명 주기를 눈으로 확인 가능

• 재요청 기능: Devtools에서 직접 refetch 실행 가능

덕분에 팀원 간 쿼리 구조와 쿼리 키 전략을 빠르게 공유할 수 있었고, 문제 발생 지점을 즉시 파악할 수 있었습니다.