React(13) 실시간으로 데이터를 보여주려면 : react-query

목차

react-query 세팅방법

react-query 사용방법

---

react-query 세팅방법

• 여느 때와 같이, 터미널에, npm install react-query 로 설치를 하면된다.
• index.js 에 가서, 세팅을 해야하는데, 밑과 같이 세팅해주면 된다
  
• App.js에서는
  import { useQuery } from "react-query";
  로 import 해오면 세팅 완료이다.

react-query 사용방법

• react-query는, 통신을, 실시간으로 하는데에 목적이 있으므로, axios로 data를 get하는 코드와 함께 쓰는데,
  기본 문법은 다음 코드와 같다.

useQuery("키 이름", () => {
	return axios.get("통신받을 URL").then((a)=>{
    	return a.data
        })
    })

• 이를 변수에 할당을 해주어서 사용하게 된다.

let result = useQuery("키 이름", () => {
	return axios.get("통신받을 URL").then((a)=>{
    	return a.data
        })
    })

1. 이렇게 변수에 할당하게 된다면, data를 가져오는데에 성공 / 실패 / 로딩중 을 구분할 수 가 있게 된다. 사용법은,
   result.isLoading 
   result.error 
   result.data 
   이고, 이에 대한 반환값들은 boolean타입(true or false)이다. 따라서, 삼항 연산식과 함께 쓴다면, 이렇게 나타낼 수 있을 것이다.
   result.isLoading ? '로딩중입니다' : result.data.name
2. axios코드 안에다가, console.log를 찍어보면,
   다른 탭을 갔다오거나, 다른 페이지를 갔다올때마다 자동으로 refetch를 해주는 모습을 확인할 수 있다. (defalut로)
   (console.log에 요청됨 나오는 사진)
   refetch하는 시간 또한 정해 줄 수 있다.
   (2000ms안에는 다시 나갔다 들어와도 refetch 안해주게끔 하는 코드)
3. defalut로, data를 읽어오는데 실패 했을 시 재시도를 해줌
4. defalut로, ajax 결과가 캐싱이 가능해서, 똑같은 경로로 똑같이 ajax 요청을 했을 경우에, 기존 성공 코드를 가져오게 됨