react-query(리액트쿼리)란?

728x90

반응형

 

 

---

 

 

 

react query 이미지

 

 

 

react-query 란

React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다.

 

 

---

 

 

설치 및 설정

 

NPM

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

 

CDN

<script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>

 

---

 

 

 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다.

 

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your application code */}
    </QueryClientProvider>
  );
}

 

 

---

 

기본 사용법 및 예

 

import { useQuery } from 'react-query';

function UserList() {
  const { data, isLoading, isError, error } = useQuery('users', () =>
    fetch('/api/users').then((response) => response.json())
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

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

 

useQuery :

react-query 에서 제공하는 훅으로 데이터를 가져오는 목적으로 사용되며 API나 다른 데이터 소스로부터 데이터를 가져오고 처리하는 작업을 간편하고 효율적으로 처리할 수 있는 선언적인 방식을 제공한다.

 

useQuery 훅은 두 개의 매개변수를 받는다.

첫 번째는 고유한 키인 "쿼리키"이고,

두 번째는 데이터를 가져오는 fetchData 함수이다.

키는 쿼리를 식별하고 캐시하기 위해 사용되며, fetchData 함수는 데이터를 가져오는 로직을 수행한다.

React Query는 caching, refetch 등을 자동으로 처리한다.

 

쿼리 함수(fetchData)

함수는 쿼리를 실행하거나 리페치해야 할 때마다 호출.

이 함수는 비동기 함수나 프로미스 기반 함수로 작성할 수 있으며, 데이터를 가져오는 로직을 처리한다.

 

 

쿼리 상태

useQuery 훅은 data, isLoading, error 등의 속성을 반환한다.(이외에도 더 있음) 이러한 속성은 쿼리의 상태를 나타낸다. 예를 들어 data는 가져온 데이터를 담고 있고, isLoading은 쿼리가 진행 중인지를 나타내며, error는 발생한 오류를 포함한다.

 

쿼리 구성

useQuery에는 쿼리를 구성하기 위해 추가적인 옵션을 제공할 수도 있는데. 이 옵션을 사용하여 캐시 유지 시간 설정, 캐시 무효화 제어, 쿼리의 의존성 정의 등을 할 수 있다. 이러한 옵션을 사용하여 쿼리의 동작을 필요에 맞게 커스터마이징 할 수 있다.

• staleTime : React Query에서 캐시된 데이터를 갱신하기 전에 쿼리가 "stale"(오래된) 상태로 유지되는 시간을 지정하는 데 사용된다. 이 옵션을 사용하면 최신 데이터가 즉시 필요하지 않은 경우에 캐시 된 데이터를 반환하여 애플리케이션의 성능을 향상할 수 있습니다.
  
  예를 들어, staleTime을 5000으로 설정하면 쿼리가 5초 동안 업데이트되지 않은 경우에만 캐시된캐시 된 데이터가 "stale" 상태로 표시된다. 이 기간 동안은 캐시 된 데이터가 반환되며, 동시에 백그라운드에서 데이터를 리페치하여 최신 데이터를 가져온다. 이는 사용자 경험을 향상하고 네트워크 요청을 줄이는 데 도움을 줄 수 있다.

 

• enabled: enabled 옵션은 쿼리의 활성화 여부를 제어하는 데 사용된다. 기본적으로 enabled는 true로 설정되어 있어 모든 쿼리가 활성화 된다. 하지만 enabled를 false로 설정하면 해당 쿼리가 비활성화되어 데이터를 가져오지 않고 캐시 된 데이터만 반환한다. 이 옵션을 사용하면 특정 상황에서만 쿼리를 활성화하고 데이터를 가져오는 것을 제어할 수 있다.
  
  예를 들어, 특정 사용자 권한을 확인해야 하는 경우에만 데이터를 가져와야 할 때 enabled를 조건에 따라 동적으로 설정하여 필요한 시점에서만 데이터를 요청할 수 있다.

const { data } = useQuery('userData', fetchData, { enabled: hasPermission });

위 예시에서 hasPermission은 사용자의 권한 여부를 나타내는 불리언 값이다. hasPermission이 true인 경우에만 쿼리가 활성화되고 데이터를 가져온다.

 

 

 

---

 

 

 

import { useMutation } from 'react-query';

const MyComponent = () => {
  const { mutate, isLoading, isError, error } = useMutation(createData);

  const handleSubmit = (formData) => {
    mutate(formData);
  };

  if (isLoading) {
    return <div>Creating...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Create</button>
    </form>
  );
};

const createData = async (formData) => {
  try {
    // Make a request to the server to create the data
    const response = await axios.post('/api/data', formData);
    return response.data; // Return the created data
  } catch (error) {
    throw new Error('Failed to create data.'); // Throw an error if the request fails
  }
};

 

useMutation :

useMutation 훅은 변이(mutations) / 데이터  업데이트,삭제를 처리하는 데 사용된다. mutate 는 서버의 데이터를 수정하거나 업데이트하는 작업을 의미. useMutation 훅은 뮤테이션 요청을 보내고 변이 상태를 관리하며, 낙관적 업데이트를 처리하는 등 뮤테이트를 처리하는 과정을 간편하게 해 준다.

 

위 예시에서 useMutation 훅은 createData 함수를 받는다. createData 함수는 뮤테이션을 수행하는 역할을 담당한다. mutate 함수를 사용하여 createData 함수를 호출하고 필요한 데이터를 전달할 수 있다.

 

useMutation 훅은 mutate, isLoading, isError, error 등의 속성을 반환한다. 이러한 속성을 사용하여 컴포넌트에서 로딩 상태, 오류 상태, 성공 상태를 처리할 수 있다.

mutate 함수를 호출하면 해당 데이터로 뮤테이트를 수행한다. React Query는 뮤테이션 요청을 처리하고 상태를 관리하며, 낙관적 업데이트와 오류 처리와 같은 유틸리티 기능을 제공한다.

 

 

 

낙관적 업데이트

 

React Query의 낙관적 업데이트는 실제 서버 응답이 수신되기 전에 성공에 대한 낙관적 가정으로 사용자 인터페이스가 즉시 업데이 트는 걸 말한다. 사용자에게 즉각적인 피드백을 제공하여 보다 원활하고 반응이 빠른 사용자 경험을 제공할 수 있다.

하지만 만약 서버 업데이트가 실패할 경우는 업데이트 이전의 데이터로 변경해야 되기 때문에 useMutation 훅에 onMutate함수를 사용하여 뮤테이션 되기 전에 실행될 콜백함수를 지정하여 해당 이슈를 방지할 수 있다.

 

const { mutate } = useMutation(createData, {
  onMutate: onMutate,
});


const handleSubmit = (formData) => {
  // Perform pre-mutation tasks using onMutate
  onMutate(formData);

  // Perform the actual mutation
  mutate(formData);
};

 

 

 

 

 

 

 

---

https://covelope.tistory.com/

Ch.Covelope

---