react-query (1) - 설치 및 설정

이번 포스트에서는 데이터를 가져오고 캐싱할 수 있는 react-query라는 개념에 대해 알아본다.

 

1. 사용 이유

본인의 경우, 플랫폼 초기 개발 과정에서는 state를 전역 state와 클라이언트 state만을 구분해서 사용했다. 개발 초기에는 문제가 없이 진행이 가능했지만, 점점 다양한 페이지와 기능들이 요구되면서 api를 추가하다보니 데이터를 관리하는 state가 클라이언트 데이터와 서버 데이터가 공존하는 상태가 발생했다. 이러다보니 state 초기값 세팅, 클라이언트 event에 따른 state 변경, api 통신 후 state 변경 등과 같이 여러 상황이 충돌하는 상황이 발생했다.

이를 해결하기 위해 대체 방안 혹은 기술을 찾다보니 state는 주로 세가지(전역state, 클라이언트 데이터, 서버 데이터)로 구분한다는 것을 알았다. 이 때, 서버 데이터를 관리하는 기술로 react-query가 많이 활용되고 있다는 것을 알게 되어 개발 플랫폼에 적용하게 되었다.

 

2. 장점

구글링을 하면 다양한 장점들이 나오는데 그 중, 본인이 직접 개발하면서 느낀 장점은 아래와 같다.

• 캐싱
• 조건에 따라 데이터를 손쉽게 get 가능
• get 데이터를 업데이트하면 get을 다시 수행하게끔 설정 가능
• 서버 데이터를 따로 state 관리 가능

3. 설치

yarn add react-query

import { NextPage } from "next";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from 'react-query'

const MyApp: NextPage<AppProps> =({ Component, pageProps }) => {
	const queryClient = new QueryClient();

  return (
      <QueryClientProvider client={queryClient}>
      	<Component {...pageProps} />
      </QueryClientProvider>
  )
}

export default MyApp;

 

---

 

이상으로 react-query를 NEXT에서 설치하고 기본 세팅하는 방법을 알아보았다.

 

다음 포스트에서는 useQuery 사용법을 알아본다.