React(85) React-Query - useQuery 적용하기

 

 

 

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

가장 기본적인 사용법을 익혀보도록 하자

 

Create, Update, Delete 에서는 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓)

React(84) React-Query - useMutation 적용하기

 

 

---

React(85) React-Query - useQuery 적용하기

 

 

useQuery 란

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

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

 

 

내부 타입 코드를 보며 조금 더 deep하게 살펴보자

 

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 하지 못하게 해주는 옵션이다)

리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다. 

stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다.

 

- 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때)

- 브라우저 화면을 이탈했다가 다시 포커스할 때

- 네트워크가 다시 연결될 때

- 특별히 설정한 refetch interval에 의해서 (refetchInterval) 

 

브라우저 화면을 이탈했다가 다시 포커스할 때 → 바로 요 부분에서 쓸때없는 refetch 가 되어 네트워크 리소스를 잡아먹지 않도록 refetchOnWindowFocus 옵션을 false 로 지정해주게 된다.

 

 

 

useQuery  적용하기

자, 위에서 모아놓은 준비물들 가지고 컴포넌트 내부에서 선언해보자

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

 

 

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

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

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

 

 

Ref:

https://gusrb3164.github.io/web/2022/01/23/react-query-typescript/

https://thinkforthink.tistory.com/340