Custom Hook 으로 Wrapping

API 별로 Custom Hook을 만들어서 사용하면 API를 손쉽게 체계적으로 관리할 수 있다.

즉, API 마다 useQuery를 Custom Hook으로 wrapping한다.

• 직관적으로 API 사용 가능

  API 별로 Custom Hook이 나누어져 있어 직관적으로 API를 사용할 수 있다.

  • Custom Hook의 이름을 보고 어떤 데이터를 사용하기 위한 함수인지 직관적으로 알 수 있다.

• API 전처리 / 후처리 가능

  Custom Hook 내부에서 API 전처리, 후처리 하여 간결하고 이해하기 쉬운 Component 작성 가능.

  • 서버 측 요구사항에 맞추어 API 호출에 전처리가 필요한 부분을 Custom Hook에서 처리함으로서 컴포넌트에서 불필요한 분기처리 없이 간단히 Custom Hook을 사용하여 API를 호출하게 됨. (ex. custom hook parameter에 따라서 다른 query key를 전달하는 경우)
  • *useQuery의 select 옵션을 사용하면 API에서 받은 response 데이터를 변경할 수 있다. 변경된 값은 실제로 사용하는 useQuery Hook의 데이터 리턴값이 된다. API 응답 중 후처리가 필요한 부분을 처리함으로서 데이터를 사용하는 컴포넌트에서 불필요한 추가 작업 없이 편리하게 개발할 수 있다.*

• 휴먼 에러 방지

  Query Key 가 Custom Hook 레벨에서 적용되기 때문에 캐싱 등 작업에서 휴먼 에러 방지 가능

  • 캐싱에 사용되는 query key가 고정되어있기 때문에 캐시를 처리할 때 query key를 잘못 입력하는 에러도 방지된다.

• API 특성에 맞는 Option 설정 가능

  API 특성별로 캐싱 등 React Query Option 설정 가능

  • *cacheTime : 데이터의 캐시가 유지될 시간을 지정.*
  • *refetchOnWindowFocus : 데이터의 stale 상태가 fetch 상태(최신 상태)가 아니고, 브라우저가 focus되면 데이터를 refetch를 시도한다.*
  • *enabled : false인 경우 useQuery는 fetch를 실행하지 않고 기다렸다가 true로 변경되면 fetch를 실행한다.*

• API 연관 관계 처리 용이

  여러 API가 연관되는 관계를 갖는 경우 용이하게 처리 가능

  • 내부적으로 다른 Custom Hook을 호출하여 데이터를 받아 useQuery의 parameter로 사용할 수 있다.

Persist Data Caching

*persisQueryClient 는 local storage 등 JavaScript에서 접근할 수 있는 data store에 캐시 정보를 저장하여 사용자의 페이지 이탈, 브라우저 종료 후 재접속시에 기존에 캐싱해놓은 정보를 사용하여 빠르게 초기화면을 보여줄 수 있다.*