About 리액트 쿼리

Clear·2023년 5월 2일

Daily Posting

목록 보기

19/27

개요

[LIVE] React Query와 상태관리 :: 2월 우아한테크세미나

React Query의 기본 개념과 현업에서 의의를 정리하고 공유하기 위해,

배민 FE 개발자 배민근님의 React Query와 상태관리라는 세미나 내용을 발췌, 요약했습니다.

React Query란?

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

공식 홈페이지의 한 줄 설명

React Query는 Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구입니다.

Server State?

공식 홈페이지에서 server state에 대해서 다음과 같이 설명하고 있습니다.

Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지됨
Fetching이나 Updating에 비동기 API가 필요함
다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있음
신경 쓰지 않는다면 잠재적으로 "out of date"가 될 가능성을 지님

배민 서비스에서 실제로 관리되는 server state의 예시

Server State의 사례를 들어보자면, 배민앱에서 사용자가 주문을 넣는다면 주문 데이터가 생성됩니다. 이 주문 데이터는 1. 서버와 DB에서 관리되는 데이터이고, 2. Client에선 모르는 데이터이므로 API를 통해 받아와야 하며, 3. 해당 주문을 가게 사장님께서 접수/취소하는 등 상태를 변경할 수 있고 4. 주문이 진행중에서 배달완료로 변경되었는데 Client에서 최초 Fetch 후 신경 쓰지 않는다면 진행중으로 유지될테니 데이터가 "out of date" 될 수 있습니다. 이런 Server State의 특성상 Client에서는 캐싱, 데이터 업데이트 및 관리, lazy load와 같은 최적화, 받아온 데이터를 어떻게 공유해서 사용할 것인가 등 여러 가지 문제에 부딪히게 됩니다.

요약

React Query는 Server State를 관리하기 위한 최고의 라이브러리 중 하나이며,

데이터 Fetching뿐만 아니라, 백그라운드에서 데이터 업데이트, Optimistic Updates, 캐싱과 Key를 통한 전역 상태와 같은 사용 등 많은 유용한 기능을 제공하고 있기 때문에,

실제 비즈니스 프로덕트에서 많이 채택되고 있다.

추가) 기존에는 redux 미들웨어를 통해 server state를 관리했었는데, store가 본래 기능보다 너무 비대해져서 redux는 ‘전역상태관리’라는 본래기능만 남기고 나머지는 react query로 넘어가고 있는 추세라고 함.

React Query 사용법

공식 홈페이지의 간단 예제

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    fetch(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.json())
  );

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong> {data.subscribers_count}</strong>{" "}
      <strong> {data.stargazers_count}</strong>{" "}
      <strong> {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

기존에 사용하던 isLoading, error, data 뿐만 아니라 isFetching(데이터 업데이트 및 최신화)등 다양한 기능 제공

세 가지 핵심 개념

공식 홈페이지에서 제시하는 3가지 코어 컨셉

우리는 이중에서 Queries와 Mutations를 주로 보면 된다.

1. Query

query는 데이타 fetching할 때 사용한다. 즉, CRUD의 Read에 사용한다.

예제 코드

useQuery에는 3가지 파라미터가 있다.

query key

query function

- useQuery의 반환값

options
- 쿼리 옵션들

2. Mutations

mutations는 데이터 생성/수정/삭제할 때 사용한다.

예제 코드

useMutation의 반환 값
options

보나스) Optimistic Update

우리 서비스에서 팔로우 구현할 때, optimistic update가 매우 유용할 수 있다.

설명

일단 팔로우를 누르면, 사용자의 ui가 변해야 한다. (팔로우 → 팔로잉)
이 작업을 onMutate 옵션으로 실행시키고,

(Optimistic Update : api요청이 성공할 것이라고 낙관적 예측 후 ui 선반영)

만약, api요청이 에러가 났다면, onError등을 활용해 복구 할 수 있다.

결론

리액트 쿼리는 fetch나 axios를 대체하는 게 아니고, server state를 관리하기 위해 추가로 쓰는 라이브러리이다. 현업에서 많이 쓰이니 프로젝트를 통해 친숙해지자.
데이터 조회(get)할 때는 useQuery
데이터 수정(post, patch, delete)할 때는 useMutations
팔로우 팔로잉 ui업데이트 할 때는 useMutations의 onMutate 옵션을 사용해보자.