@tanstack react-query npm

1. 터미널 설치

npm i @tanstack/react-query

2. 우산씌우기 

import { QueryClient ,QueryClientProvider } from '@tanstack/react-query';
import {Outlet} from 'react-router-dom'
import './App.css';
import { SearchHeader } from './components/SearchHeader';

function App() {
  const queryClient = new QueryClient();
  return (
   <>
   <SearchHeader/>
   <QueryClientProvider client={queryClient}>
    <Outlet/>
   </QueryClientProvider>
   
   </>
  );
}

export default App;

✨ 사용하는 이유부터 좀 알아보자

usequery를 사용할것인데 이걸 사용하려면 네트워크 통신하는 부분에 적용을 시켜주는게 좋을듯 하다.

Outlet은 내가 보여줄 리스트들이 담겨져 있을것이라 여기에 적용을 해줄거기 때문에 감싸준다.

 

1. QueryClientProvider client = { 작명 } 을 통해  Outlet을 감싸준다.

2. const 작명 = new QueryClient( ) 을  작성해주면 끝

3. import 해주는것도 잊지 않아야한다. QueryClientProvider , QueryClient 를 import 해준다 tanstack/query 에