Next.js 애플리케이션에서 react-query를 사용해야 하는 이유

소개

useState & useEffect 와 react-query의 장단점을 비교하고, Next.js 환경에서도 왜 react-query를 사용하는 것이 좋은지 쉽게 설명하겠습니다. 기본적으로 코드를 먼저 보겠습니다.

 

1. 기존 useState + useEffect로 가져오는 방식

"use client";
import React, { useEffect, useState } from "react";
import { todo } from "./type";
import axios from "axios";

const Before = () => {
  const [todo, setTodo] = useState<Array<todo>>([]);

  useEffect(() => {
    const getData = async () => {
      const res = await axios.get("http://localhost:3001/posts");

      setTodo(res.data);
    };
    getData();
  }, []);

  if (todo.length === 0) {
    return <div>Loading...</div>;
  }

  return (
    <section>
      <h2>Before : useState + axios</h2>
      {todo &&
        todo.map((item, index) => {
          return (
            <ul key={index} className=" flex gap-[20px]">
              <li>{item.id}</li>
              <li>{item.title}</li>
              <li>{item.body}</li>
            </ul>
          );
        })}
    </section>
  );
};

export default Before;

 

2. useQuery를 사용해서 가져오는 방식

"use client";
import React from "react";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { todo } from "./type";

const fetchTodos = async (): Promise<todo[]> => {
  const res = await axios.get("http://localhost:3001/posts");
  return res.data;
};

const Before = () => {
  const {
    data: todo,
    isLoading,
    isError,
    error,
  } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });

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

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

  return (
    <section>
      <h2>Before : useState + axios</h2>
      {todo &&
        todo.map((item, index) => (
          <ul key={index} className="flex gap-[20px]">
            <li>{item.id}</li>
            <li>{item.title}</li>
            <li>{item.body}</li>
          </ul>
        ))}
    </section>
  );
};

export default Before;

useState와 useEffect로 데이터 가져오기

장점:

1. 간단함: 사용하기 쉽고 이해하기 쉬워서 초보자도 금방 배울 수 있습니다.
2. 직접 제어 가능: 데이터와 상태를 직접 제어할 수 있어서 원하는 대로 조정할 수 있습니다.

단점:

1. 반복적인 코드: 로딩 중이거나 에러가 발생했을 때 처리를 매번 직접 써야 합니다.
2. 복잡해질 수 있음: 웹사이트가 커지면 여러 데이터와 상태를 관리하는 것이 점점 어려워집니다.
3. 캐싱 없음: 데이터를 저장해두는 기능이 없어서, 똑같은 데이터를 여러 번 가져올 수 있습니다.
4. 백그라운드 업데이트 없음: 화면을 다시 열 때 자동으로 데이터를 새로 가져오려면 추가적인 코드를 작성해야 합니다.

react-query로 데이터 가져오기

장점:

1. 간편한 데이터 가져오기: 로딩 중이거나 에러가 발생했을 때 처리를 자동으로 해줍니다.
2. 자동 캐싱: 데이터를 자동으로 저장해두어서, 똑같은 데이터를 다시 가져오지 않습니다.
3. 백그라운드 업데이트: 화면을 다시 열 때 자동으로 데이터를 새로 가져와서 항상 최신 상태로 유지합니다.
4. 자동 재요청: 인터넷이 끊겼다가 다시 연결되면 자동으로 데이터를 새로 가져옵니다.
5. 개발자 도구: 데이터를 어떻게 가져오고 있는지 쉽게 확인할 수 있는 도구를 제공합니다.

단점:

1. 배우기 조금 어려움: 새로운 개념을 배우는 것이 처음에는 어려울 수 있습니다.
2. 파일 크기 증가: 웹사이트의 크기가 조금 커질 수 있습니다.

Next.js 애플리케이션에서 react-query를 사용해야 하는 이유

Next.js는 서버에서 데이터를 가져오는 기능이 있지만, react-query가 제공하는 모든 기능을 포함하지는 않습니다. 여기 react-query가 Next.js를 도와주는 이유가 있습니다:

1. 수분 공급 (Hydration): react-query는 서버에서 가져온 데이터를 클라이언트에서도 잘 사용할 수 있게 해줍니다.
2. 클라이언트 상태 관리: Next.js는 서버에서 데이터를 잘 가져오지만, react-query는 화면을 다시 열 때 자동으로 데이터를 새로 가져오는 기능을 제공합니다.
3. 최적화된 성능: react-query는 데이터를 저장해두고 자동으로 업데이트해서, 웹사이트가 빠르고 반응이 좋습니다.
4. 사용 편리성: react-query는 데이터를 가져오고 관리하는 일을 더 쉽게 만들어줍니다.

결론

useState와 useEffect는 기본적인 데이터 가져오기를 제공하지만, react-query는 더 강력하고 확장 가능한 도구입니다. 반복적인 일을 자동으로 해주고 성능을 향상시키며 개발 과정을 더 쉽고 빠르게 만듭니다. Next.js 애플리케이션에서도 react-query는 서버와 클라이언트에서 데이터를 잘 관리할 수 있게 도와줍니다. 복잡한 웹사이트를 만들 때, react-query를 사용하면 더 쉽고 빠르게 만들 수 있습니다.

 

참조 사이트

https://qiita.com/75ks/items/d5d5bfe21a3e8bb964ae

Next.js 13 & TanStack Query(React Query) の注意点 - Qiita

https://zenn.dev/noko_noko/articles/fd8a10c14de9c3

[Next.js] Tanstack Query の SSR での利用法

https://tanstack.com/query/v5/docs/framework/react/guides/query-functions

Query Functions | TanStack Query React Docs

https://zenn.dev/akineko/articles/8c047c3473aed0

React Query-基礎知識編

https://qiita.com/taisei-13046/items/05cac3a2b4daeced64aa

React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 - Qiita