[TIL] react query를 이용해 데이터 fetch

과제를 진행하면서 주어진 api에서 제품 정보를 받아와야할 일이 있었다. 일단 기존에 했던 방식대로 api.js 파일을 만들어 axios로 데이터를 받았다. 그리고 useProducsLoad라는 커스텀 훅을 만들어서 loading 중일 때와 error일 때를 체크했다. 처음 만들었던 useProductsLoad의 코드는 다음과 같다.

export default function useProductsLoad() {
  const [products, setProducts] = useState({
    id: 0,
    imageUrl: "",
    productList: [],
  });

  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const getData = async () => {
    try {
      setIsLoading(true);
      const data = await getProducts();
      setProducts(data);
    } catch (e) {
      setIsError(true);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return {
    isLoading,
    isError,
    products,
  };
}

그러다 React Query를 사용하면 이 긴 코드를 짧게 줄일 수 있다는 것을 알게 되었다.

공식 사이트를 방문하면 React Query를 다음과 같이 소개하고 있다.

"Performant and powerful data synchronization for React"
리액트를 위한 강력하고 성능 좋은 데이터 동기화.

간단히 말하자면, React Query는 서버 상태를 관리하는 라이브러리다. 기존에는 데이터를 fetch할 때 로딩 상태를 관리하거나 에러 등을 관리하기 위해 여러 훅을 사용해야 했으나, 리액트 쿼리를 사용하면 로직을 간결하게 줄일 수 있다.

이번 과제를 진행하며 React Query를 도입했고, 위에서 썼던 useProductsLoad()라는 훅은 다음과 같이 간결해졌다.

export default function useProductsQuery() {
  const { data, isLoading, isError } = useQuery("Products", () =>
    getProducts()
  );

  return {
    isLoading,
    isError,
    products: data,
  };
}

완전 마법 🧙🏻‍♀️ ✨