Hello ReactWorld - 7 react-query

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

react-query

몇 초마다 자동으로 ajax 요청
ajax 통신 실패시 요청 재시도
등의 기능을 조금 더편리하게 구현해주는 라이브러리

• 1. 설치하기

npm install react-query

• 2. 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}>
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
  </Provider>
  </QueryClientProvider>
);

const queryClient = new QueryClient(); 코드를 추가하고, 기존 코드를 QuertClinetProvider로 감싸줌

사용하기

axios.get('/loginUser').then((result) => {
  console.log(result.data)
})

위와같은 ajax 쿼리를 react-query를 이용하면 아래와 같이 작성할 수 있다.

let reuslt = useQuery("loginUser", ()=> {
  return axios.get('/loginUser').then((result) => {
    console.log(result.data)
    return result.data
  })
})

react-query사용시 장점

• 1. ajax 상태파악이 용이하다.

<Nav className="ms-auto">
  { result.isLoading && '로딩중'}
  { result.error && '에러남'}
  { result.data && result.data.name}
</Nav>

이런식으로 ajax 통신중일때, 에러발생시에 대한 처리가 간단하다.
이를 순수 react로 작성하려고 하면 state를 만들어서....

• 2. 자동으로 refetch를 해준다.
  데이터가 실시간으로 변하는 경우, ajax 호출을 주기적으로 해주어서
  더 좋은 UX를 제공할 수 있다.
• 3. ajax 호출 실패시 자동으로 retry 해준다.
• 4. 자식컴포넌트에 props로 내려줄 필요가 없다(!)
  자식 컴포넌트에도 똑같이 react-query를 이용해서 ajax 호출을 하면 된다!
  > 페이지 전환마다 ajax 호출을 하면 비효율적일거라는 생각이 들지만
  react-query가 알아서 한개만 실행시켜준다.