자주 사용하는 라이브러리 중 데이터를 관리하고 동기화 해주는 react-query에 대해 정리해보고자 한다.

react-qury?

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

공식 홈

https://tanstack.com/query/latest/docs/framework/react/overview

react-qury 장점

react-qury 사용법

설치

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

적용 - pages router 기준

// src/pages/_app.js
import React from "react";
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

export default function App({ Component, pageProps: { session, ...pageProps }, ...appProps}) {
  
	const [queryClient] = React.useState(() => new QueryClient());
  
  return (
    <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
           <Component {...pageProps} />
        </Hydrate>
    </QueryClientProvider>
  );
}

Query

useQuery

// 기본형
const { data } = useQuery(
	queryKey,
	queryFunction,
	options,
)

// 사용 예시
function Test() {
  const { status, data, error } = useQuery("tests", fetchTestList);

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

  return (
    <ul>
      {data.map(test => (
        <li key={test.id}>{test.title}</li>
      ))}
    </ul>
  );
}
 

useQuery를 동기적으로 실행하는 방법

비동기 함수인 useQuery를 동기적으로 사용하고자 하면 enabled 옵션을 사용하면 된다.

enabled가 true 일 때 실행된다.

const { data: testList, error: testError } = useQuery("tests", fetchTestList);
const { data: testTwo, error } = useQuery(
  "testTwos",
  fetchTestTwosList,
  {
    enabled: !!testList // true가 되면 fetchTestTwosList를 실행한다
  }
);

useQueries

다 수의 useQuery를 동시에 실행하고자 하고 싶을 때 묶어서 실행하면 된다.

const results = useQueries({
  queries: [
    { queryKey: ['tests'], queryFn: fetchTestList},
    { queryKey: ['testTwos'], queryFn: fetchTestTwosList}
  ]
})

Mutation

Mutaion 함수를 사용하여 데이터를 업데이트하고 캐시를 업데이트 할 수 있다. Mutation 함수는 데이터 생성, 수정, 삭제 용으로 사용되며 POST, PUT, DELETE 요청시에 사용한다.

첫번째 인자는 Mutation Function으로 Promise를 반환하는 함수입니다. useQuery 에서와 마찬가지로 fetch, axios등의 함수를 의미한다.

두번째 인자는 useMutation에 사용되는 옵션을 지정하는 객체다.

//기본형
const { mutate } = useMutation(
  mutationFn,
  options,
);


//사용 예시
import { useMutation, useQueryClient } from 'react-query';

// 데이터 업데이트 함수
function updateUser(userId, updatedData) {
  return fetch(`/api/user/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(updatedData),
  }).then((response) => response.json());
}

function UserProfileEditor({ userId }) {
  const queryClient = useQueryClient();
  
  const { mutate } = useMutation((updatedData) => updateUser(userId, updatedData), {
    onSuccess: () => {
      // 데이터 업데이트 후 캐시를 재로드
      queryClient.invalidateQueries(['user', userId]);
    },
  });

  const handleSubmit = (updatedData) => {
    mutate(updatedData); // mutate는 자동으로 실행되지 않기 때문에 submit 시에 mutate 실행
  };

  return (
    <div>
      <h2>Edit User Profile</h2>
      <UserForm onSubmit={handleSubmit} />
    </div>
  );
}

  return (
    <div>
      <h2>Edit User Profile</h2>
      <UserForm onSubmit={handleSubmit} />
    </div>
  );
}

데이터 캐싱

staletime, cachetime 옵션을 사용하면 React Query에서 자체적으로 제공하는 데이터 캐싱 기능을 이용 할 수있다.

staletime (갱신 지연 시간)

staletime은 캐시된 데이터의 유효 기간을 나타내는 옵션입니다. 호출한 데이터는 리액트 쿼리 자체적으로 저장하는데 staletime은 기본적으로 0으로 설정되어 있어, 데이터가 한 번 캐시되면 즉시 만료되고 다시 요청된다.

이 값을 조정해서 데이터를 일정 시간 동안 캐시로 사용하고, 그 이후에만 다시 요청할 수있다

const { data } = useQuery(['data', getServerData,{
  staletime: 10 * 60 * 1000;
})

cachetime (캐시 유지 시간)

cachetime은 캐시된 데이터가 얼마나 오랫동안 메모리에 유지될지를 나타내는 옵션다.

이 값을 설정하면 캐시된 데이터가 일정 시간 도안 메모리에 유지된 후 자동으로 삭제된다.

데이터가 일정 기간 동안 메모리에 남아 있게 함으로써 같은 데이터를 다시 요청할 때 캐시에서 가져오기 때문에 성능을 향상 시킬 수 있다.

const { data } = useQuery(['data', getServerData], {
  cachetime: 30 * 60 * 1000, // 30분
})