강의를 듣다 알게된 react Query는 공고에서도 심심치 않게 보였다. 거의 필수 기능인것 같아 공부하고 내 프로젝트의 코드를 싹 엎었다.
단지 글만써서는 확 와닿지는 않지만 정리함으로써 내 머리에 저장시켜야겠다.

react Query란?

어플리케이션에서 데이터 가져오기,캐싱,동기화 등 효율적으로 관리할 수 있도록 도움을 주는 라이브러리이다. 이 라이브러리는 서버에서 데이터를 가져오고 캐시하며, 상태 관리 및 데이터 동기화를 쉽게 처리할 수 있다.

주요 기능

1. 선언적 데이터 페칭
React Query는 데이터를 가져오는 것을 선언적인 방식으로 처리할 수 있다. 훅 기반 API를 사용하여 데이터를 가져오고 캐시하며, 컴포넌트 렌더링을 자동으로 관리합니다.

2. 자동 캐싱
라이브러리는 자동으로 데이터를 캐싱하고, 필요한 경우에 캐시된 데이터를 사용하여 렌더링 성능을 향상시킨다. 캐시된 데이터는 자동으로 유지되며, 만료 시간 설정 등 다양한 옵션을 지원한다.

3. 뮤테이션 및 낙관적 업데이트
React Query는 뮤테이션을 통해 서버에 데이터를 업데이트하는 기능을 제공하며, 낙관적인 업데이트를 통해 사용자 경험을 향상시킨다.

4. 쿼리 무효화 및 리페칭
서버 또는 특정 조건으로 인해 데이터가 무효화되면 자동으로 리페치되어 최신 데이터를 유지한다.

5. 쿼리 재시도 및 에러 핸들링
데이터 로딩 중에 오류가 발생하면 React Query는 지능적으로 재시도를 수행하고 오류 처리를 지원한다.

6. 서버 측 렌더링 (SSR) 지원
React Query는 서버 측 렌더링을 지원하여 초기 렌더링 시에도 데이터를 효과적으로 관리할 수 있다.

예시

useQuery

import React from 'react';
import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
};

const QueryExample = () => {
  const { data, isLoading, error } = useQuery('exampleQuery', fetchData);

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

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

  return (
    <div>
      <h1>Todo Title: {data.title}</h1>
      <p>Todo ID: {data.id}</p>
    </div>
  );
};

export default QueryExample;

useMutation

import React from 'react';
import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

const updateData = async (newTitle) => {
  const response = await axios.patch('https://jsonplaceholder.typicode.com/todos/1', { title: newTitle });
  return response.data;
};

const MutationExample = () => {
  const queryClient = useQueryClient();

  const mutation = useMutation(updateData, {
    onSuccess: (data) => {
      // 성공 시, 쿼리를 업데이트하여 최신 데이터로 리렌더링
      queryClient.setQueryData('exampleQuery', data);
    },
  });

  const handleUpdate = async () => {
    try {
      // 뮤테이션 실행
      await mutation.mutateAsync('New Todo Title');
    } catch (error) {
      console.error('Error updating data:', error);
    }
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Updating...' : 'Update Data'}
      </button>
      {mutation.isError && <p>Error updating data: {mutation.error.message}</p>}
    </div>
  );
};

export default MutationExample;