react react-query 사용하기

[주인장]

1. 설치 

npm install @tanstack/react-query

2. index.js 

import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <QueryClientProvider client={queryClient}>

      <Provider store={store}>

        <BrowserRouter>

          <App />

        </BrowserRouter>

      </Provider>

    </QueryClientProvider>

  </React.StrictMode>

);

3. useQuery 사용 

 let result = useQuery(['checkId'], () => {

    return axios.get('https://codingapple1.github.io/shop/userdata.json')

      .then((res) => {

        return res.data;

      })

  });

장점1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있습니다. 

result라는 변수에 ajax 현재 상태가 알아서 저장됩니다.

- ajax요청이 로딩중일 땐 result.isLoading 이 true가 됩니다. 

- ajax요청이 실패시엔 result.error 가 true가 됩니다. 

- ajax요청이 성공시엔 result.data 안에 데이터가 들어옵니다.

<Nav.Link>

    {result.isLoading && '로딩중'}

    {result.error && '에러'}

    {result.data && result.data.name }

</Nav.Link>

장점2. 틈만나면 알아서 ajax 재요청해줍니다.