React Query 사용법

생성일

Feb 17, 2023 08:04 AM

태그

1. useQuery

데이터 패칭할때 파라미터 값 넣어서 사용하는 방법


export const SearchRequest = async (value: string) => {
  const API_KEY = `06d31e08cffa1b28d94af0313467cde8`;
  try {
    const result = await fetch(
      `http://dapi.kakao.com/v2/local/search/keyword.json?query=${value}&category_group_code=SW8`,
      {
        headers: {
          Authorization: `KakaoAK ${API_KEY}`,
        },
      }
    );
    return result.json();
  } catch (e: unknown) {
    if (e instanceof Error) {
      alert(e);
    }
  }
};

리액트 쿼리에서는 왠만하면 키값은 배열에 넣어서 사용하는거 추천


const [value, setValue] = useState<string>('');


const { data } = useQuery(['search', value], () => SearchRequest(value));