React Query의 개념과 사용법

최민경·2024년 6월 28일

Weekly-paper

목록 보기

10/10

React Query

React Query는 React에서 비동기 데이터를 효과적으로 관리할 수 있는 라이브러리로 데이터의 캐싱, 동기화, 갱신을 쉽게 처리할 수 있어 개발자가 서버 상태를 손쉽게 관리할 수 있다.또한 API 요청 및 상태 관리를 위해 규격화된 방식을 제공해, API 상태와 관련된 다양한 데이터를 제공하여 복잡한 구현과 설계 없이도 개발자가 효율적으로 화면을 구성할 수 있다.

React Query 사용함으로써 얻는 이점

코드를 간소화시킬 수 있다.
데이터를 요청하고 변경하는 로직을 단순화함으로써 반복적으로 작성할 필요가 없으며 유지보수가 간단해졌다.
캐싱을 통해 속도를 향상시키고 성능을 최적화 시킨다.
사용자가 데이터를 변경하거나, 변경하지 않아도 일정 시간이 지나면 자동으로 데이터를 패칭해 최신 상태를 유지한다.
API 상태에 관련된 데이터를 감지하고 손쉽게 사용할 수 있다.

캐싱 : 서버에 요청한 데이터를 로컬에 저장해 두고, 동일한 요청이 발생할 때마다 서버에 다시 요청하지 않고 저장된 데이터를 재사용

사용법

queryClient

// React Query는 내부적으로 queryClient를 사용하여
// 각종 상태를 저장하고, 부가 기능을 제공합니다.
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Menus />
    </QueryClientProvider>
  );
}

사용할 곳에 QueryClientProvider를 이용해 다음과 같이 감싸주어야 한다.
React Query를 사용하는 모든 컴포넌트가 동일한 QueryClient 인스턴스에 접근할 수 있게 하기 위해서 해당 context로 감싸는 것이다.

get

기본적인 형태의 예시

// 가장 기본적인 형태의 React Query useQuery Hook 사용 예시
const { data } = useQuery(
  queryKey, // Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (필수)
  fetchFn, // Query 요청을 수행하기 위한 Promise를 Return 하는 함수 (필수)
  options, // useQuery에서 사용되는 Option 객체 (옵션)
);

React Query의 useQuery는 API 요청마다 구분되는 Unique Key (Query Key) 가 필요하다.
이 Unique Key로 서버 상태 (API Response)를 로컬에 캐시하고 관리한다.

실제 사용 예시

// "/menu" API에 Get 요청을 보내 서버의 데이터를 가져옴
  const { data } = useQuery('getMenu', () =>
    axios.get('/menu').then(({ data }) => data),
  );

useQuery 훅을 사용해 '/menu' API에 get요청을 보낸 후 data를 가져와 저장한다.

// "/menu" API에 Get 요청을 보내 서버의 데이터를 가져옴
  const { data, isLoading, error, isError } = useQuery('getMenu', () =>
    axios.get('/menu').then(({ data }) => data),
  );

다음과 같이 data 뿐만 아니라 isLoading, error, isError 등 다양한 상태를 손 쉽게 가져와 사용할 수 있다.

post

실제 사용 예시

// "/menu" API에 Post 요청을 보내 서버에 데이터를 저장
  const { mutate } = useMutation(
    (suggest) => axios.post('/menu', { suggest }),
    {
      // Post 요청이 성공하면 위 useQuery의 데이터를 초기화합니다.
      // 데이터가 초기화되면 useQuery는 서버의 데이터를 다시 불러옵니다.
      onSuccess: () => queryClient.invalidateQueries('getMenu'),
    },
  );

// ...

<button onClick={() =>
  mutate({
    id: Date.now(),
    title: 'Toowoomba Pasta',
  })
}> button </button>

useMutation 훅을 사용해 서버에 데이터를 보내는 mutate 함수를 생성한다.
suggest는 post 요청에 포함될 내용이고 요청이 성공할 경우 onSuccess의 콜백을 통해 'getMenu' 쿼리 데이터를 초기화 시킨다.
초기화된 쿼리는 useQuery 훅에 의해 다시 데이터를 페칭 한다.
post 요청을 하고 싶은 경우 mutate를 이용해 post 요청하고 싶은 객체를 인자로 넘겨주면 된다.