React, react-query

react-query

ajax 요청하다보면 여러기능이 필요할때가 있음

• 몇초마다 자동으로 데이터 다시 가져오게 하려면?
• 요청실패시 몇초 간격으로 재시도를 하게 할것인지?
• 다음 페이지 미리 가져오게 할려면?
• ajax 성공/실패시 각각 다른 html을 보여주려면?

직접 개발해도 되지만 react-query 라이브러리를 설치해서 써도 됨

react-query는 server-state(DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와주기때문에

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

ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 비효율적일 수 있음

그렇기에 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 있음

 

react-query 설치 및 셋팅

터미널을 열어

npm install @tanstack/react-query

입력하여 설치

 

//index.js

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

1. 상단에 QueryClient, QueryClientProvider를 import
2. const queryClient = new QueryClient()
3. QueryClientProvider로 감싼뒤, client={queryClient}

 

react-query로 ajax 요청

function App(){
  let result = useQuery(['작명'], ()=>
    axios.get('자신이 얻기 원하는 데이터링크')
    .then((a)=>{ return a.data })
  )
}

1. 상단에 useQuery를 import
2. ajax 요청을 useQuery()로 감싸기

 

유용한 기능 4가지

1. ajax 요청시 성공/실패/로딩중 상태를 쉽게 파악할 수 있음

function App(){
  let result = useQuery(['작명'], ()=>
    axios.get('자신이 얻기 원하는 데이터링크')
    .then((a)=>{ return a.data })
  )

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러남' }
      { result.data && result.data.name }
    </div>
  )
}

 

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

• ajax요청 로딩중일 땐 result.isLoading 이 true가 됨
• ajax요청 실패시엔 result.error 가 true가 됨
• ajax요청 성공시엔 result.data 안에 데이터가 들어옴

그래서 직접 개발시에 state를 만들어야 했지만 이렇게 하면 따로 만들 필요x

 

2. ajax 재요청

페이지 체류하고나서 일정시간이 경과하거나 다른 창으로 갔다가 본 페이지로 돌아오거나 

다시 메인페이지로 돌아가는 등의 경우에 알아서 ajax 요청을 다시 해줌

재요청 끄는 법, 재요청간격 조절하는 법도 있음

 

let result = useQuery(
["작명"],
() =>
  axios.get('자신이 얻기 원하는 데이터링크').then((a) => {
    console.log("요청됨");
    return a.data;
  }),
{ staleTime: 2000 }
);

이렇게 staleTime을 이용해 재요청간격을 조절할 수 있음

 

3. 실패시 재시도

잠깐 인터넷이 끊겼거나 서버가 죽었을때 등에 의해 ajax 요청이 실패했을때

여러번 재시도를 알아서 해줌

 

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

props전송할 필요 없이 ajax요청하는 코드를 똑같이 적고 요청하면

react-query는 ajax요청이 2개 있으면 1개는 날리고

캐싱기능으로 이미 같은 ajax요청을 한적이 있는 경우 그것을 우선 가져와서 사용함