[React] React Query (실시간 데이터 필요할 때 사용)

서버랑 통신하는 코드를 ajax로 짜다보면 응용기능이 필요해질때가 있음

-ajax 성공시/실패시 각각 html 보여주려면?

-몇초마다 자동으로 ajax 요청해서 서버에서 데이터 실시간으로 받으려면?

-ajax 요청 실패시 몇초 후 요청 재시도하려면?

-다음페이지 미리 가져오고 싶으면?

 

React Query라는 라이브러리 쓰면 위의 기능 사용 가능

React Query가 유용한 분야는 실시간 sns이나 코인거래소 등 실시간 데이터를 계속 가져와야하는 사이트들

그외에는 굳이 필요 없음

 

React Query

 

1. 라이브러리 설치

 

2. index.js 셋팅

 

 

 

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

 

사이트 접속 후 로그인하면 오른쪽 맨위에 유저이름 출력되는 기능 만들기

 

 

● ajax 요청하기

 

 

 

● react-query 에 담아서 ajax 요청해보기

userQuery('작명', ( ) => {여기안에 ajax 요청 코드 })

*변수에 담아서 사용

 

 

 

● raect-query 이용해서 ajax 요청 보낼때 장점

 1) ajax 요청이 성공/실패/로딩중인지 변수 뒤에 data, isLoading, error 붙여서 쉽게 파악 가능

 2) 틈만나면 자동으로 재요청해줌 -> refetch 해줌 (refetch 기능 끌수도 있음)

 3) ajax 요청 실패시 알아서 retry 해줌

 4) 자식컴포넌트에서 원하는 경우 state-props로 공유 안해도 됨, 자식컴포넌트가서 ajax 요청하는 코드 한번 더 작성하기

(근데 ajax 요청하는 똑같은 코드를 부모, 자식에서 두번이나 쓰면 비효율적이지 않는가? 놉! 

reacut-query는 똑똑해서 요청을 두번하지 않고 합쳐서 하나만 처리)

 5) ajax결과 캐싱기능(ajax 성공했던 결과를 5분 동안 기억하는 기능, ajax 요청하는 똑같은 코드를 다른곳에서 나중에 작성한다면 5분전에 성공한 결과를 먼저 보여주고 GET 요청 시작, 속도 빠른 장점 있음)

 

 

 

Q. 로딩중일때 '로딩중입니다' 보여주고 싶으면?

 

방법 1.

중괄호안에 result.isLoading 넣고 삼항연산자로 코드짜기

ajax 요청이 로딩중(true)이면 로딩중, 로딩중이 아니면(false) 실제 데이터 result.data.name 출력

 

 

방법 2.

if && 쓰기