[React] 리액트 쿼리 React-Query useQuery 적용하기

 

 

React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다.

 

 

useQuery 란?

 

useQuery 은 3가지 매개변수를 받는다.

useQuery(key, function, options)  인자 3개를 받는다
	  ↑      ↑         ↑
       쿼리키  api호출함수  쿼리옵션

 

TQueryFnData

→ useQuery 로 실행하는 query function의 return 값을 정하는 제네릭 타입이다 (오리지널 데이터 타입으로 무가공)

 

TError

→ query function의 error 형식을 정하는 제네릭 타입이다

 

Tdata

→ data에 담기는 실질적 type을 뜻한다. query function의 데이터를 2차 가공하는 경우 사용하는 type 이다.

 

TQueryKey

→ useQuery의 첫 번째 인자로 주는 queryKey의 타입을 명시적으로 지정해주는 제네릭 타입이다.

 

type QueryKey = string | readonly unknown[];

 

 

useQuery 는 위에서 설명한 타입들로 이루어져 있다.

 

export declare function useQuery<
  TQueryFnData = unknown,  	
  TError = unknown,		   
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey // string | readonly unknown[];
  >(					// 인자로 받는 타입들 
    queryKey: TQueryKey, 
    queryFn: QueryFunction<TQueryFnData, TQueryKey>, 
    options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey' | 'queryFn'>
  ): UseQueryResult<TData, TError>; 	// 리턴 값으로 받을 타입들

 

 

 

useQuery 매개변수

getPostList 라는 api 통신함수를 React-query 를 적용해서 사용하려고 한다.

자, useQuery 에 들어갈 매개변수를 준비해보자

 

 

queryKey

문자열 또는 배열로 지정할 수 있다. 

→ 함수이름이 getPostList 이니 'getPostList' 라는 키 값으로 결정.

 

 

queryFn

서버와 통신할 promise 처리가 이루어지는 api 함수를 의미한다 (axios를 이용해 서버에 API 요청)

→ api 통신함수 좀 만들어 줘야지

 

export async function getPostListAPI<T>(
  params: Param
):Promise<T> {
  const res = await http.get(		// get 방식으로 http 쏴주고
    `${API_ADDRESS}/post`
  );
  
  if (res.status !== 200) { 		// 네트워크 에러시 에러핸들링
    throw new Error(`Response status is "${res.status}"`);
  }

  if (res.data.resultCode !== '0200') { // 네트워크 에러시 에러핸들링
    throw new Error(`ResultCode is "${res.data.resultCode}"`);
  }
  
  const postList: T = JSON.parse(JSON.stringify(res.data.resultData));
  return postList; // 받아온 데이터를 리턴해주자
}

 

options

다양한 옵션들을 사용해 부가적인 기능들을 사용할 수 있다.

→ refetchOnWindowFocus 라는 옵션을 사용하자.

(간단히 설명하면, 사용자가 브라우저 창을 나갔다 들어올 때, refetch 하지 못하게 해주는 옵션이다)

 

 

 

useQuery  적용하기

 

컴포넌트 내부에서 선언.

import { useQuery } from "react-query"; // 임포트해오기

 

useQuery 를 선언하자 useQuery 의 리턴 객체 중 data 항목을 따로 불러서 사용할 것이다.

 

const { data } = useQuery<Post[], Error, Post[]>(
	'getPostList',	// 쿼리 키
	getPostList, 	// api 함수
	{refetchOnWindowFocus: false} // 옵션
);

console.log(data); // 받아온 포스팅 배열이 출력된다.