[ReactQuery] (3) ReactQuery - customHooks (feat. Nextjs)

Tanstack (ReactQuery) 대표이미지

 

 

접근 (요약)

reactQuery를 활용해 custom hooks을 작성한다. (queryKey와 queryFn)  

 

  1. queryKey Object (queryKey Namespace) 패턴으로 정리

- queryKey : 데이터 요청을 식별하는 중요한 역할

- 쿼리 키 네임스페이스 패턴을 활용한 효율적 데이터 관리

- ./react-query/index.ts

 

  2. hooks 폴더 내에 customHooks 작성 => useExampleQuery.ts

- app/hooks/queries/useExampleQuery.ts

- app/hooks/queries/mutation/useExampleMutation.ts

 

  3. useExampleQuery.ts (CustomHooks 코드 형식)

- Data Fetching을 캡슐화한 react-query기반 Custom Hook

- 재사용성을 고려한 react-query custom hook 패턴

- useQuery를 활용한 커스텀 훅을 통해 API 요청을 간결하게 관리하기

---

방법

  0. Custom Hooks

## Custom Hooks

- 대규모 앱에서는 각 데이터 유형에 대해 커스텀 훅을 만드는 것이 일반적

- 장점1 : (다중 컴포넌트 액세스 O)

여러 컴포넌트들의 데이터에 액세스해야 하는 경우 useQuery 호출을 다시 작성할 필요가 없어진다.

- 장점2 : (Query Key 혼동 X) 여러 개의 Query 호출들을 사용하는 경우 사용 중인 키가 혼동 될 수 있는데, Custom hooks를 사용해 매번 호출을 하면 키 혼동 위험 X

- 장점3 : (QueryFn 혼동 X) 사용하려는 QueryFn (쿼리 함수) 혼동 위험 X

- 장점4 : 디스플레이 계층에서 데이터를 얻는 방법의 implementation을 추출 - implementation을 변경하기로 결정한 경우, Hooks를 업데이트 하기만 하면 됨 - 컴포넌트 업데이트 필요도 없다

---

 

  1. queryKey Object (queryKey Namespace) 패턴으로 정리

import {QueryClient} from "@tanstack/react-query";

// queryKey Object 패턴(=queryKey Namespace) 형식으로 연속적으로 작성
export const queryKeys = {
  examples: {
    exam1: 'example1',
    exam2: 'example2',
  },
  samples: {
    sample1: 'sample-a',
    sample2: 'sample-b',
  }
};

export const queryClient = new QueryClient();

 

- queryKey : 데이터 요청을 식별하는 중요한 역할

- 쿼리 키 네임스페이스 패턴을 활용한 효율적 데이터 관리

- ( ./react-query/index.ts )

 

---

  2. hooks 폴더 내에 customHooks 작성 => useExampleQuery.ts

- app/hooks/queries/useExampleQuery.ts

- app/hooks/queries/mutation/useExampleMutation.ts

 

---

  3. useExampleQuery.ts (CustomHooks 코드 형식)

// CustomHooks를 위한 예시

import {useQuery} from "@tanstack/react-query";
import {queryKeys} from "@/react-query";

export default function useExampleQuery() {
  return useQuery({
    queryKey: [queryKeys.examples.exam1],
    queryFn: () => getExampleInfo(),
  });
}

export async function getExampleInfo() {
  // TODO : Fetch 구문
  // const response = await clientFetch<>({ url: `/`})
  // return response?.data ? response.data : undefined;
}

 

- Data Fetching을 캡슐화한 react-query기반 Custom Hook

- 재사용성을 고려한 react-query custom hook 패턴

- useQuery를 활용한 커스텀 훅을 통해 API 요청을 간결하게 관리하기