탠스택 쿼리 시작

웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다.

리액트쿼리란?

Http 요청을 전송하고 프론트엔드 사용자 인터페이스를 백앤드 데이터와 동기화된 상태로 유지하는 기능을 지원하는 라이브러리!

위의 기능을 수행하는데 사실 useEffect와 fetch 함수로도 구현은 가능하지만 리액트 쿼리를 사용하면 코드가 매우 간결해지고 개발자로서 훨씬 수월하게 작업할 수 있습니다!

npm i @tanstack/react-query 

위의 명령어로 시작할 수 있습니다.

import { useQuery } from '@tanstack/react-query';

useQuery({
    queryKey:...
    queryFn:...
  })

위의 useQuery 훅을 사용하면 동일한 http 요청에 대해서 이전 요청의 응답을 재사용할 수 있습니다.
해당 응답 데이터들을 리액트쿼리에 저장하고 재사용 기간을 정하여 같은 응답을 일정 기간동안 사용할 수 있게 됩니다.

위와 같은 기능을 위해서는 키가 필요합니다.

공식문서에서 쿼리 키에 관한 내용입니다.

queryKey: unknown[] <= 값의 타입이 배열임.
Required
The query key to use for this query.
The query key will be hashed into a stable hash. See Query Keys for more information.
The query will automatically update when this key changes (as long as enabled is not set to false).

에러 발생!

바로 쿼리 훅을 사용하려고 했는데 바로 에러 발생...?

다음과 같은 에러는 쿼리 프로바이더를 사용함으로 해결할 수 있습니다!

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

RouterProvider 이거는 쿼리랑 완전 비슷하게 라우터로 페이지들을 정의한 후 프로바이더로 제공하면 됩니다.

예상 코드로는 const router = createBrowserRouter({...
다음과 같이 되겠죠?!!