[React] React-Query

서버랑 통신하는 기능들을 ajax로 구현하다 보면 응용 기능들이 필요할 때가 있다.

- ajax 성공/실패 시 다른 UI 보여주기

- 몇 초마다 자동으로 ajax 요청

- 실패 시 몇 초 후 요청 재시도

- prefetch (다음 페이지 내용 미리 가져오기)

 

react-query 라이브러리를 사용하면 위 기능들을 쉽게 구현할 수 있다.

react-query는 실시간 데이터를 계속 가져와야 하는 사이트에서 잘 사용된다.

 

아래는 npm i react-query 후 초기 세팅 화면이다. (index.js)

react-query를 사용해 ajax 요청을 하기 위해서는 useQuery 함수를 사용하면 된다.

useQuery를 사용하면 ajax 현재 상태를 쉽게 파악할 수 있다.

let result = useQuery('userdata', () =>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a) => { return a.data })
 )

ajax 요청이 성공했을 땐 result.data 안에 데이터가 들어오고,
실패했을 땐 result.error가 true가 되며
로딩 중일 땐 result.isLoading 값이 true가 된다.

 

또한 useQuery를 사용하면 자동으로 재요청을 해주며

staleTime을 사용하여 refetch되는 간격을 설정할 수 있다.

 

그리고 ajax 요청 실패 시 자동으로 재시도를 해준다. (4~5번 정도)

존재하지 않는 서버에 ajax 요청 시 결과

 마지막으로 useQuery를 사용하면 state를 props로 공유하지 않아도 된다.

같은 데이터를 하위 컴포넌트에서 사용할 때 위에 작성한 코드를 똑같이 사용하면 된다.똑같은 주소로 ajax 요청을 여러 번 하면 react-query가 자동으로 한 번에 처리한다.

 

실시간으로 데이터를 보여주는 서비스에서 react-query를 사용하면 편리할 것 같다.

---

참고자료

코딩애플 [React 리액트 기초부터 쇼핑몰 프로젝트까지! - 실시간 데이터가 중요하면 react-query]