React Query 알아보기

✔️ React-Query란?

React Query 는 서버에 있던 값을 클라이언트로 가져오거나, 캐싱 또는 동기화 등 일련의 비동기 과정들을 편하게 하는 데 사용되는 리액트 라이브러리 입니다.

✔️ React-Query의 장점

리액트 쿼리를 사용하면 프로젝트 구조가 단순해지고, 프론트엔드 개발시 귀찮을 수 있는 몇가지 일들을 수행해줍니다.

• 효율적인 캐싱 관리
• 같은 데이터에 대하여 여러번의 요청이 있을 시 중복을 제거 (옵션으로 중복 호출 허용 시간 조절도 가능)
• 데이터가 오래되었을 경우 알아서 업데이트 해줌
• 페이징 처리 성능 최적화
• Redux로 비동기 데이터를 관리하는 것 보다 코드 분량이 적음

✔️ 설치하기

리액트 쿼리는 npm 또는 yarn으로 손쉽게 설치할 수 있습니다.

npm install react-query
yarn install react-query

✔️ React-Query 기본 세팅

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      {/* devtools */}
      <ReactQueryDevtools initialIsOpen={true} />
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

✔️ Queries

import { useQuery } from "react-query";

function App() {
  const info = useQuery("todos", fetchTodoList);
}

• useQuery 의 첫번째 파라미터는 unique key를 입력합니다. 두번째 파라미터는 데이터를 패칭하기 위한 비동기 함수를 넣어줍니다.
• 첫번째 파라미터로 설정한 unique key 는 다른 컴포넌트에서도 해당 키를 사용하여 호출하는 식으로 활용 가능합니다.
• unique key는 String과 Array를 받습니다.
• useQuery 는 비동기로 작동합니다.

useQuery return 값에 포함된 states

• isLoading or status === ‘loading’ : 현재 데이터를 요청 중이나 아직 데이터가 없을 경우
• isError or status === ‘error’: 쿼리에서 에러가 났을 경우
• isSuccess or status === ‘success’ - 쿼리 요청 성공한 경우
• isIdle or status === ‘idle’: 이 쿼리는 현재 사용할 수 없을 때 나옴
• isFetching : 데이터 요청 중일 때는 (내부적으로 리패칭 중 일때도 포함) 항상 True를 리턴한다

useQuery 동기적으로 실행

const { data: todoList, error, isFetching } = useQuery("todos", fetchTodoList);
const {
  data: nextTodo,
  error,
  isFetching,
} = useQuery("nextTodos", fetchNextTodoList, {
  enabled: !!todoList, // true가 되면 fetchNextTodoList를 실행한다
});

위와 같이 enabled 옵션을 사용하는 경우 useQuery를 사용할 때 동기적으로 사용가능하게 해줍니다.

useQueries

function App({ users }) {
  const userQueries = useQueries(
    users.map((user) => {
      return {
        queryKey: ["user", user.id],
        queryFn: () => fetchUserById(user.id),
      };
    })
  );
}

쿼리 무효화 시키기

const { mutate } = useMutation(apis.update, {
  onSuccess: () => {
    queryClient.invalidateQueries("all"); //invalidateQueries(무효화 시킬 queryKey 이름)
    day_input.current.value = "";
    time_input.current.value = "";
  },
});

위와 같이 invalidateQueries 를 사용하게 되면 데이터가 최신으로 변경되었을 때 이전 데이터를 무효화 시킬 수 있습니다.

✔️ 참고 사이트

https://tanstack.com/query/v4/docs/guides/window-focus-refetching?from=reactQueryV3&original=https://react-query-v3.tanstack.com/guides/window-focus-refetching

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)