react-query

실시간 데이터가 중요하다면, react-query를 사용하여 몇초마다 자동으로 데이터를 가져올 수 있다!

SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들이 쓰면 유용.

react-query로 ajax 요청하는 법

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

useQuery로 ajax요청을 감싸면 됨.

장점1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있습니다.

--로딩 중?--
result.isLoading
--에러 남?--
result.error
--데이터--
result.data

ajax요청이 로딩중일 땐 result.isLoading 이 true가 됨.

ajax요청이 실패시엔 result.error 가 true가 됨.

ajax요청이 성공시엔 result.data 안에 데이터가 들어옴.

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

일정시간이 경과하거나
다른 창으로 갔다가 다시 페이지로 돌아오거나 하는 경우에
알아서 ajax 요청을 다시 해준다.

당연히 재요청 끄는 법, 재요청간격 조절하는 법도 있습니다.

장점3. 실패시 재시도 알아서 해줌

장점4. ajax로 가져온 결과는 state 공유 필요없음