쿼리+엑시오스

[0gunkim]

리엑트 쿼리와 엑시오스를 사용하여 커스텀 훅 파일을 만들었습니다

hooks/useAsync 파일에 코드를 작성했고 get만 간단히 테스트하고 나머지부분은 주석처리 했습니다.
백엔드에서 명세서 나오면 is상태 값들을 이용해서 다시한번 테스트해서 코드를 추가 하겠습니다.

import { useQuery } from '@tanstack/react-query';
import { get_utm } from 'async/api/getApi';


export const useGetUtm = () => {
  return useQuery(['get_utm'], async () => {
    const { data } = await get_utm;
    return data;
  });
};

import get_utm 은 비동기 로직입니다. (명세서나오면 간결하게 api와 비동기 나눠서 작성하겠습니다)

아래코드는 보여지는 컴포넌트에서 사용하는 코드이고 커스텀훅에서 타입을 넣게 되면 react-query 에서 제공하는useQueryOption을 사용하여 코드를 작성해야 할 것 같습니다.

import { useGetUtm } from 'util/hooks/useAsync';
function RenderPage() {
  const { data } = useGetUtm();
  console.log(data);

완성목표 코드는 사용하는 컴포넌트에서 커스텀훅 인자에 할당된 api를 넘겨주면 값과 상태값들을 가져와야합니다.