일단 셋팅

1. 설치
   

2. index.js 에서 QueryClientProvider 셋팅
   

react-query로 ajax 요청

• useQuery 사용
• return 꼭 써주기

 let result = useQuery(['작명'], () => {
    return axios.get('https://codingapple1.github.io/어쩌구').then(a => {
      return a.data
    })
  })

useQuery를 사용하면
isLoading
error
data
==> ajax 요청 성공/실패/로딩중 상태를 쉽게 파악

result라는 변수에 ajax 현재 상태가 알아서 저장됨

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

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

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

예제 1 - result.isLoading

예제 2 - react-query 장점

• 틈만나면 알아서 ajax 재요청 refetch해줌.
  코인거래소, 실시간 sns 서비스에 유리합니다.

• staleTime 을 통해 refetch 시간 간격도 지정할 수 있습니다.

• refetch 중단 가능
  
  
  
  

• 
  react-query는 스마트하기 때문에 ajax 요청이 2개나 있으면 1개만 날려주고
  캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씁니다.
  즉, ajax1과 ajax2를 요청할때, ajax1을 먼저 보여주기때문에 훨씬 빠른것같은 느낌을 줍니다