react react-query

바다캔디·2025년 6월 30일

React react-query

리액트공부

목록 보기

35/39

react-query

react 라이브러리
SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들에 쓰면 유용함

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

등 등 등, 직접만들기 귀찮은 기능들을 라이브러리에 미리 만들어둠. 그거 그냥 가져다쓰면 됨.

1.설치방법

터미널 - npm으로 설치후

npm install react-query@3

index.jsx에 import 해주기
기능 import, 변수생성, App 감싸주기.
기존 하던것과 비슷함.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'  //1번

const queryClient = new QueryClient()   //2번

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

2. 사용방법

useQuery 상단에서 import 해온 뒤에
useQuery()로 ajax 요청을 감싸주기.
아래 코드처럼, 기존처럼 axios 등을 사용한 비동기 통신 코드를 작성.
그 코드를 useQuery()로 감싸주기.

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

3. 그래서 장점이 뭔데요

ajax요청 상태를 편하게 확인가능
알아서 ajax 재요청해줌
요청실패시 알아서 재요청
state간 ajax데이터 공유가 편함
server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와줌
- 이건 뭔소린지 모르겠음

장점1. ajax요청 상태를 편하게 확인가능

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

ajax요청이 로딩중일 땐 result.isLoading 이 true.
ajax요청이 실패시엔 result.error 가 true.
ajax요청이 성공시엔 result.data 안에 데이터가 들어옴.
3항연산자나 &&연산자로 보여주는 등, 분기쳐서 적절한 ui를 보여주면 될듯.

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

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

페이지 켜놓고 일정시간이 경과하거나
다른 창으로 갔다가 다시 페이지로 돌아오거나
다시 메인페이지로 돌아가거나 등등등
이런 여러 경우에 알아서 ajax 요청을 다시 해줌.
당연히 재요청 끄는 법, 재요청간격 조절하는 법도 있음. 적절하게 수정하여 사용하면될듯.

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

잠깐 인터넷이 끊겼거나 서버가 죽었거나 그러면 ajax 요청이 실패함.
실패했을 때는 얘가 4번인가 5번인가 재시도를 알아서 해줌.

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

부모 - 자식컴포넌트간 정보공유 위해 ajax결과를 props전송 안해도 됨.
자식컴포넌트에다가, 부모컴포넌트에서 ajax 요청하던 코드 똑같이 또 적으면 됨.
그거 똑같은 요청 2번인데 비효율적인거 아닌가 싶은데, react-query는 같은 ajax 요청이 2개나 있으면 1개만 날려주고, 캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씀.