API 별로 Custom Hook
을 만들어서 사용하면 API를 손쉽게 체계적으로 관리할 수 있다.
즉, API 마다 useQuery를 Custom Hook
으로 wrapping한다.
직관적으로 API 사용 가능
API 별로 Custom Hook이 나누어져 있어 직관적으로 API를 사용할 수 있다.
API 전처리 / 후처리 가능
Custom Hook 내부에서 API 전처리, 후처리 하여 간결하고 이해하기 쉬운 Component 작성 가능.
*useQuery
의 select
옵션을 사용하면 API에서 받은 response 데이터를 변경할 수 있다. 변경된 값은 실제로 사용하는 useQuery Hook의 데이터 리턴값이 된다. API 응답 중 후처리가 필요한 부분을 처리함으로서 데이터를 사용하는 컴포넌트에서 불필요한 추가 작업 없이 편리하게 개발할 수 있다.*휴먼 에러 방지
Query Key 가 Custom Hook 레벨에서 적용되기 때문에 캐싱 등 작업에서 휴먼 에러 방지 가능
API 특성에 맞는 Option 설정 가능
API 특성별로 캐싱 등 React Query Option 설정 가능
*cacheTime
: 데이터의 캐시가 유지될 시간을 지정.**refetchOnWindowFocus
: 데이터의 stale 상태가 fetch 상태(최신 상태)가 아니고, 브라우저가 focus되면 데이터를 refetch를 시도한다.**enabled
: false인 경우 useQuery는 fetch를 실행하지 않고 기다렸다가 true로 변경되면 fetch를 실행한다.*API 연관 관계 처리 용이
여러 API가 연관되는 관계를 갖는 경우 용이하게 처리 가능
*persisQueryClient
는 local storage 등 JavaScript에서 접근할 수 있는 data store에 캐시 정보를 저장하여 사용자의 페이지 이탈, 브라우저 종료 후 재접속시에 기존에 캐싱해놓은 정보를 사용하여 빠르게 초기화면을 보여줄 수 있다.*