React shop pj 230930 -2

React-query

• ajax 성공시/실패시 html 보여주려면?
• 몇초마다 자동으로 ajax 요청?
• 실패시 몇초 후 요청재시도?
• prefetch

--> 위의 것들을 직접 하기 귀찮은 경우 React Query 사용하자 !
---> 실시간 데이터를 계속 가져와야 하는 사이트들이 쓰면 좋음

설치하기

npm install @tanstack/react-query

---

index.js에 셋팅하기

• QueryClientProvier로 Provier 감싸주기

---

import 해주기

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

---

useQuery(['작명'],

---

App.js

서버에서 유저이름 가져와 보여주기

React-query 장점

1. ajax 성공/실패/ 로딩중 파악 쉬움
2. 틈만나면 알아서 ajax 재요청해줌
3. 실패시 재시도 알아서 해줌

---

1. ajax 성공/실패/ 로딩중 파악 쉬움

result.data
//  ajax 성공시 가져오는 데이터가 들어있음

result.isloading
// ajax 요청이 로딩중일 때 true가 됨

result.error
// ajax 요청이 실패했을 때 true가 됨

2. 틈만나면 알아서 ajax 재요청해줌