React Query 시작하기

왜 사용하는가

React Query Docs | motivation

기존의 상태 관리 라이브러리는 클라이언트 상태 관리는 적합하지만 서버 상태 관리는 적합하지 않았다. 구분없이 함께 저장하는 경우 ↑
서버 상태는 클라이언트 상태와는 다른 특징을 가지고 있기 때문에 다르게 분리해서 관리되어야 한다.

서버 상태 특징

• 다른 컴퓨터의 사용자와 함께 공유하는 데이터 → 많은 사용자들이 함께 사용
• Client에서 관리하거나 저장할 수 없는 원격 공간에 있음.
• 데이터를 fetch, update할 때 비동기 API를 사용해야함.
• 신경쓰지 않는다면 "out of date"가 될 수 있다.

나도 모르는 사이 바뀔 수 변화에 따라 빠르게 또는 원하는 순간에 업데이트 할 수 있게 해주고
원격 공간의 데이터를 가져오기 위해 사용하는 비동기 함수 처리 로직을 간편화 해주고
데이터 캐싱도 해주는 등
서버 상태 관리를 위한 다양한 일을 해준다.

React Query란?

서버 상태 관리 라이브러리
React에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트할 수 있다.

Fetch, cache and update data in your React and React Native applications all without touching any "global state".

• powerful data Synchronization: 효율적인 데이터 업데이트, 동기화
• without touching any "global state": 클라이언트 상태와 서버 상태 분리
  → 섞이지 않고 각 역할에 충실할 수 있다

+ Declarative

데이터 패칭 로직을 일일이 작성할 필요없다.
React Query에게 어떤 데이터를 가져올지, 언제까지 최신데이터로 유지할지 전달하면 된다.

선언적 프로그래밍

• 어떻게 동작할 것인지 과정을 상세히 적을 필요 없이 무엇을 원하는지 전달한다
• 목적 전달이 명확, 깔끔한 코드 작성 가능

Get Started

QueryClientProvider

서버 상태를 전역적으로 전달해줌 (useContext로 구현되있음)

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}

	</QueryClientProvider>
  );
}

Devtools

백그라운드에서 진행되는 상황을 UI로 확인할 수 있다. 리액트 쿼리 데이터 플로우 이해하기 아주 좋음

import { ReactQueryDevtools } from 'react-query/devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}

      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Options;