[React] useState + useEffect => useQuery 로 대체하기

Vue에서 React(NextJs)로 마이그레이션하는 과정에서 코드를 좀더 직관적이게 관리하면서 캐싱도 용이 하게 하고 싶다는 생각이 들었습니다.
그러한 이유로 react-query를 도입하게 되었습니다.

마이그레이션 한다고 너무 바빳네요...

🤚 들어가기에 앞서! 해당 코드는 가상의 코드입니다.

1. 이전 코드

import { useEffect, useState } from "react";
import { getItems } from "../../../api/ItemApi";
import Item from "../../../common/Item/Item";
import ItemListStyle from "./ItemListStyle";
import ItemType from "../../constants/Item"

const ItemList = () => {
  const [items, setItems] = useState<ItemType>([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await getItems("/items");
      setItems(res.data);
    };
    fetchData();
  }, []);
  return (
    <ItemListStyle>
      {items.map((item, i) => {
        return (
            <Item
              key={item.id}
              item={item}
              tabIndex={i}
            />
        );
      })}
    </ItemListStyle>
  );
};

export default ItemList;

useState, useEffect를 사용해서 구현하였습니다.
처음 한번만 데이터를 가져옵니다.
해당 코드에 적용한 것을 보겠습니다.

2. 변경 코드

import { useQuery } from "react-query";
import { getItems } from "../../../api/ItemApi";
import Item from "../../../common/Item/Item";
import ItemListStyle from "./ItemListStyle";

const ItemList = () => {
  const fetchData = async () => {
      const res = await getItems("/items");
      return(res.data);
  };
  
  const { data, isLoading, isError } = useQuery("item", fetchData);

  if (isLoading) {
    return <div>isLoding...</div>;
  }
  if (isError) {
    return <div>error</div>;
  }
  
  return (
    <ItemListStyle>
      {data.map((item, i) => {
        return (
            <Item
              key={item.id}
              item={item}
              tabIndex={i}
            />
        );
      })}
    </ItemListStyle>
  );
};

export default ItemList;

코드 자체가 깔끔하게 변경된것을 볼수 있습니다.
또한 useEffect,useState 등을 쓰지 않고도 상태 관리 및 fetch를 컨트롤 할수 있어서 좋았던거 같습니다.

해당 코드를 작성하면서 useEffect에 useQuery도 넣는 실수도 하고 refetch도 쓰고 많은 실수를 해보면서 많은 것을 배운거 같습니다...

참조

https://choar816.tistory.com/167
https://tanstack.com/query/latest/docs/react/overview