react-query에 대하여 .. (1)

회사에서 작업중인 사이트는 redux로 관리가 되고 있는데 CTO님께서 react-query or recoil 을 추천해주셔서 구글링을 해봤었다.
recoil은 첫 회사에서 간단히 써봐서 구조나 가져와서 사용하는 방법을 간단히 알고 있었는데
react-query에 대한 지식이 없어서 봤더니 react-query 이녀석 뭔가 더 땡겼다 ..
(좋은 점이 더 많은 넉낌적인 넉낌 ..?)

react-query ?

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다.

🌀 react-query의 장점

• React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하며 업데이트 하는 작업을 도와준다.
• redux를 사용할 때 느끼겠지만 긴 코드를 사용함으로써 장황한 BoilerPlate코드를 보게 되는데 react-query를 사용하면 직관적으로 API 사용이 가능하다.
• 제공하는 캐싱, Window Focus Refetching를 통해 오래된 데이터를 업데이트 해준다.
• 서버 쪽 데이터를 가비지 컬렉션을 이용하여 자동으로 메모리를 관리해준다.
• 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다.

---

QueryClientProvider

import { queryClient, QueryClientProvider } from 'react-query';

// Client를 먼저 만들어준다.
const queryClient = new QueryClient();

function App() {
  // Application에 Client를 제공한다.
  return (
    <QueryClientProvider client={queryClient}>
	    <Home />
    </QueryClientProvider>
  );
}

useQuery

import { useQuery } from 'react-query';
// 주로 사용되는 3가지 
const { data, isLoading, error } = useQuery(queryKey, queryFn, options);

QueryKey

• queryKey를 기반으로 데이터 캐싱을 관리한다.
• 문자열 or 배열로 지정할 수 있다.

useQuery('todos', ...); // 문자열
useQuery(['todos'], ...); // 배열

• 쿼리가 변수에 의존하는 경우에는 QueryKey에도 해당 변수를 써주어야 한다.

// 배열로 지정 후 uniqueKey 안에 같이
const { data, isLoading, error } = useQuery(['todos', id], () => axios.get(`.../${id}`));

Query Functions

• useQuery안의 두 번째 인자는 promise를 반환하는 함수를 써줘야 한다.
• 아래의 두 가지 방식으로 코드작성을 많이 한다.

useQuery('todos', getDate);
useQuery(['todos', todoId], () => getData(todoId));

Query Options

필요에 의해 설정 해 주는 값 들이다. ( 자주 사용하는 10가지!!! )

enabled (boolean)

• 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.
• 아래는 todoId가 존재 할 때만 쿼리 요청을 한다는 의미.

const { data } = useQuery(uniqueKey, fn, {
  enabled: !!todoId
}

retry (boolean | number | (failureCount: number, error: TError) => boolean)

• 실패한 쿼리를 재시도하는 옵션이다.
• 기본적으로 실패 시 3번 재시도 한다.
• true 설정 시 쿼리 실패 할 때마다 무한 재시도를 하며, false로 설정 시 재시도를 하지 않는다.

staleTime (number | Infinity)

• 데이터가 fresh 상태로 유지되는 시간이다. 해당 시간이 지나면 stale 상태가 된다.
• default 값은 0이다.
• fresh 상태에서는 쿼리가 다시 mount 되도 fetch가 발생하지 않는다.
• ex) 60 * 1000 // 1분

cacheTime (number | Infinity)

• inactive 상태인 캐시 데이터가 메모리에 남아있는 시간이다. 이 시간이 지나면 캐시 데이터는 가비지 컬렉터에 의해 메모리에서 제거된다.
• default 값은 5분이다.

refetchOnMount (boolean | "always")

• 데이터가 stale 상태일 경우 마운트 시 마다 refetch를 실행하는 옵션이다.
• default 값은 true
• always 로 설정하면 마운트 시 마다 매번 refetch 를 실행한다.

refetchOnWindowFocus (boolean | "always")

• 데이터가 stale 상태일 경우 윈도우 포커싱 될 때 마다 refetch를 실행하는 옵션이다.
• 예를 들어, 크롬에서 다른 탭을 눌렀다가 다시 원래 보던 중인 탭을 눌렀을 때도 이 경우에 해당한다. 심지어 F12로 개발자 도구 창을 켜서 네트워크 탭이든, 콘솔 탭이든 개발자 도구 창에서 놀다가 페이지 내부를 다시 클릭했을 때도 이 경우에 해당한다.
• default 값은 true
• always 로 설정하면 항상 윈도우 포커싱 될 때 마다 refetch를 실행한다는 의미이다.

onSuccess ((data: TDdata) => void)

• 쿼리 성공 시 실행되는 함수이다.
• 매개변수 data는 성공 시 서버에서 넘어오는 response 값이다.

onError ((error: TError) => void)

• 쿼리 실패 시 실행되는 함수이다.
• 매개변수로 에러 값을 받을 수 있다.

onSettled ((data?: TData, error?: TError) => void)

• 쿼리가 성공해서 성공한 데이터가 전달되거나, 실패해서 에러가 전달 될 때 실행되는 함수이다.
• 매개변수로 성공 시엔 성공 데이터, 실패 시에는 에러가 전달된다.

initialData (TData | () => TData)

• initialData 를 설정하면 쿼리 캐시의 초기 데이터로 사용된다. (쿼리가 아직 생성되지 않았거나 캐시되지 않았을 때)
• staleTime 이 설정되지 않은 경우 초기 데이터는 기본적으로 stale 상태로 간주한다.