useQuery 시그니처 제네릭 위주로 살펴보기

지영·2023년 7월 26일
0
post-thumbnail
post-custom-banner

🌼 TMI..

입사 후 회사 업무에 적응하며 지내던 삼개월, 수습 기간이 막 끝난 지금의 내가 지난 삼개월을 말하자면.. 여지껏 공부했던 내용으로 잘 버텼다..!라고 할 수 있을 것 같다..🥹

이제 내가 그동안 궁금했던 부분을 공부해보려 한다.
정리에 집중하지 않고 짤막하게 가벼운 마음으로 작성할 예정..!

오늘은 서버 상태 관리 라이브러리인 React Query에서 제공하는 useQuery훅의 시그니처를 제네릭 위주로 살펴봐야디. 👀


useQuery의 시그니처

function useQuery<TResult, TError, TQueryKey>(
  queryKey: TQueryKey,
  queryFn: (queryKey: TQueryKey) => Promise<TResult>,
  options?: UseQueryOptions<TResult, TError, TResult, TQueryKey>
): UseQueryResult<TResult, TError>;
  1. TResult: 이는 제네릭 타입 매개변수로서, queryFn 함수에서 반환되는 결과 데이터의 타입을 나타낸다.
  2. TError: 이는 제네릭 타입 매개변수로서, queryFn 함수가 발생시킬 수 있는 에러 데이터의 타입을 나타낸다.
  3. TQueryKey: 이는 제네릭 타입 매개변수로서, queryKey 매개변수의 데이터 타입을 나타낸다.
    queryKey는 특정 쿼리를 식별하는데 사용되며, 데이터가 이미 캐시에 있는지 여부를 판단하는 데 사용된다.
  4. queryKey: 이 함수의 첫 번째 매개변수로서, 쿼리를 식별하는 키 또는 식별자이다. 타입은 TQueryKey로 지정된다.
  5. queryFn: 이 함수의 두 번째 매개변수로서, queryKey를 인자로 받고 TResult 타입의 값을 반환하는 Promise를 반환하는 함수이다.
  6. options: 이는 선택적 매개변수로서, 쿼리에 대한 추가적인 구성 옵션을 전달할 수 있다.
    UseQueryOptions<TResult, TError, TResult, TQueryKey> 타입이다. 실제로 UseQueryOptions의 내용은 구현에 따라 다르며, 특정 사용 사례에 맞게 사용된다고 한다.
    내일은 option에 대하여 알아봐야지.
  7. UseQueryResult 객체를 반환한다. 이 객체는 결과 데이터와 쿼리에 관련된 메타데이터를 포함하고 있으며, 제네릭 타입 매개변수로 TResult는 결과 데이터의 타입을, TError는 에러 데이터의 타입을 나타낸다.
profile
천천히 운영되는 개발 블로그
post-custom-banner

0개의 댓글