[React] react-query

 

 

ajax 요청을 하다 보면 이런 기능이 필요해질 때가 있다.

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

직접 개발하는 방법도 있지만 react-query라는 라이브러리를 설치해서 사용해도 된다.

SNS, 코인거래소 같은 실시간 데이터를 보여 줘야 하는 사이트 만들 때 유용하지만 ajax 요청을 몇 초마다 계속 날려서 가져오는 방식이라 http1을 쓰는 서버나 브라우저라면 비효율적일 수 있다.

그래서 react-query는 ajax 관련 기능 개발을 편하게 할 수 있는 데에 의의가 더 있다.

 

 

 

react-query 설치&세팅

npm install react-query@3

터미널을 열여서 설치 명령어를 입력해 준다.

 

(index.js)
import { QueryClient, QueryClientProvider } from '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>
);

index.js 파일을 열어서

1. 상단에 QueryClient, QueryClientProvider를 import 한다.
2. const queryClient = new QueryClient() 추가한다.
3. <QueryClientProvider>로 <App /> 컴포넌트를 감싼다.

 

 

react-query로 ajax 요청하는 법

그냥 ajax 요청을 해도 되지만 react-query를 사용해서 ajax 요청을 날리면 더 편리한 기능을 제공한다.

(App.js)
import { useQuery } from 'react-query';

function App() {
  let result = useQuery(['작명'], ()=>{
    axios.get('url').then((a)=>{
     return a.data
    });
  });
 }

1. 상단에 useQuery를 import 한다.
2. useQuery()로 ajax 요청을 감싼다.

 

유용한 기능

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

(App.js)
function App() {
  let result = useQuery(['작명'], ()=>
    axios.get('url')
    .then((a)=>{ return a.data })
  );
    
  return (
    <div className="App">
        { result.isLoading && '로딩중' }
        { result.error && '에러남'}
        { result.data && result.data.name }
    </div>
  })
}

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

• ajax 요청이 로딩중일 때는 result.isLoading이 true가 된다.
• ajax 요청 실패 시에는 result.error가 true가 된다.
• ajax 요청 성공 시에는 result.data 안에 데이터가 들어온다.

그래서 ajax 로딩 중일 때는 <A /> 보여 주세요, ajax 성공 시에는 <B /> 보여주세요 같은 것들을 직접 개발하려면 state부터 만들어야 했는데 react-query를 사용하면 그러지 않아도 된다.

 

(2) ajax 재요청

페이지 체류하고 나서 일정 시간이 경과하거나, 다른 창으로 갔다가 다시 페이지로 돌아오거나, 다시 메인 페이지로 돌아가거나 등 이런 여러 경우에 알아서 ajax 요청을 다시 해 준다.

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

(App.js)
function App() {
  let result = useQuery(['작명'], ()=>
    axios.get('url')
    .then((a)=>{ return a.data }),
    { staleTime : 2000 }
  );
 }

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

(3) ajax 요청 실패시 재시도

잠깐 인터넷이 끊겼거나 서버가 죽거나 등의 경우처럼 ajax 요청이 실패했을 때 4~5번 정도 재시도를 알아서 해 준다.

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

자식 컴포넌트로 props 전송할 필요없이 자식 컴포넌트에 ajax 요청하는 코드를 똑같이 작성하면 된다. 

react-query는 ajax 요청이 2개 있으면 1개만 날려주고, 캐싱 기능이 있기 때문에 이미 같은 ajax 요청을 한 적 있으면 그걸 우선 가져와서 사용한다.

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.