React Query

[[React]]

React Query 란?

데이터 패치, 동기화, 캐싱 및 업데이트와 관련된 복잡성을 추상화하여 간단하게 처리 할수 있도록 도와주는 라이브러리임

React Query 이용하여 전역 상태를 관리할수 있음

Query

React Query에서 특정 데이터 요청의 상태와 데이터를 나타내는 객체임
쿼리 키(query key)에 따라 고유하게 식별되며, QueryClient의 캐시에 저장됨
Query에 대한 모든 정보 (데이터, 상태 필드 또는 마지막으로 언제 패치가 이루어졌는지와 같은 메타 정보)를 포함할 뿐만 아니라, Query 함수를 실행하며 재시도, 취소, 중복 제거 로직도 포함하고 있음
또한 불가능한 상태에 빠지지 않도록 내부 상태 기계를 가지고 있음
예를 들어, 이미 패치 중인 상황에서 Query 함수가 실행되어야 한다면, 해당 패치는 중복 제거될 수 있습니다. Query가 취소되면 이전 상태로 돌아감 (롤백이 가능함)

QueryClient

쿼리를 관리함
React Query의 핵심 부분 중 하나로, Query의 상태와 설정을 관리하는 중앙 집중식 저장소 역할임
애플리케이션의 Query 정보를 저장하며, 캐싱, 동기화, 오류 처리 등의 기능을 수행함
내부적으로 모든 Query 인스턴스의 상태와 데이터를 관리하는 캐시를 가지고 있음
요청된 Query 데이터와 해당 데이터의 메타데이터 (로딩 상태, 에러 등)를 메모리에 저장함 이렇게 해서 같은 Query가 다시 요청될 때, 즉시 캐시된 데이터를 반환하여 API 호출을 줄일 수 있음

import { QueryClient, QueryClientProvider } from "react-query"; // 쿼리 클라이언트를 만듭니다. 
const queryClient = new QueryClient({ defaultOptions: { queries: { // 5분에 한번씩 상태를 업데이트 합니다. 
staleTime: 5 * 60 * 1000, // 5 minutes 
}, }, }); 
function App() { return ( // 쿼리 클라이언트를 적용 합니다.
    <QueryClientProvider client={queryClient}> <RestOfYourApp /> </QueryClientProvider> 
) 
}

QueryObserver

React Query의 내부에서 useQuery와 같은 쿼리 훅을 동작시키는 핵심 클래스
useQuery를 사용하면 내부적으로 QueryObserver 인스턴스가 생성되어 쿼리의 상태를 추적하고 업데이트함
이것은 쿼리의 데이터를 가져오고, 캐시를 관리하고, 리패치(refetch) 등의 동작을 수행하는 주체임

useQuery

React Query는 데이터를 가져오는 작업을 담당하는 훅(Hook)
이 것을 사용하여 API 또는 비동기 함수를 호출하고, 해당 호출의 상태와 결과 데이터를 가져올 수 있음

export const useToast = () => { 
    return useQuery('toast', getToast, { 
        staleTime: Infinity, 
    }); 
};

• useQuery 에 첫번째 인자로 배열을 사용하고 두번째 인자로 콜백 함수를 받음????
  fetch 로 키워드로 받아서 키워드를 파라미터로 주고 받아온걸! 콜백함수로!?

useMutation

데이터를 추가, 수정, 삭제하는 등의 변이(mutation) 작업에 사용되는 훅(Hook)

export const useSetToast = () => {
  // QueryClient는 React Query의 핵심 기능들을 제공하는 객체로, 데이터를 가져오고(cache), 다시 가져오기(refetch), 동기화하기(synchronize) 등의 작업을 처리합니다.
  const queryClient = useQueryClient();  
  // useMutation은 API 호출 또는 사이드 이펙트를 가진 함수를 실행하고 그 결과를 추적합니다.
  return useMutation(setToast, {
    // 실제 서버를 호출 하지 않고 상태를 변경합니다.
    onMutate: (newToast) => {
      queryClient.setQueryData('toast', newToast);
    },
  });
};