[React] useState + useEffect 대신 useQuery 사용하기: get

Todo 앱에 바로 적용해보았다.

before

import { useEffect, useState } from "react";
import { getTodos } from "../../../api/TodoApi";
import TodoItem from "../../../common/TodoItem/TodoItem";
import * as TodoListStyle from "./TodoListStyle";

const TodoList = ({ refresh, refresher }) => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await getTodos("/todos");
      setTodos(res.data);
    };
    fetchData();
  }, [refresh]);
  return (
    <TodoListStyle.TodoUl>
      {todos.map((todo, i) => {
        return (
          <div key={todo.id}>
            <TodoItem
              key={todo.id}
              todo={todo}
              refresher={refresher}
              tabIndex={i}
            />
          </div>
        );
      })}
    </TodoListStyle.TodoUl>
  );
};

export default TodoList;

useState, useEffect를 사용해서 구현.
처음 렌더링이 되면 데이터가 fetch된다.

after

import { useQuery } from "react-query";
import { getTodos } from "../../../api/TodoApi";
import TodoItem from "../../../common/TodoItem/TodoItem";
import * as TodoListStyle from "./TodoListStyle";

const TodoList = () => {
  const fetchTodo = async () => {
    const res = await getTodos("/todos");
    return res.data;
  };

  const { data, isLoading, isError } = useQuery("todo", fetchTodo);

  if (isLoading) {
    return <div>isLoding...</div>;
  }
  if (isError) {
    return <div>error</div>;
  }
  return (
    <TodoListStyle.TodoUl>
      {data.map((todo, i) => {
        return (
          <div key={todo.id}>
            <TodoItem key={todo.id} todo={todo} tabIndex={i} />
          </div>
        );
      })}
    </TodoListStyle.TodoUl>
  );
};

export default TodoList;

useQuery를 사용하니 useEffect, useState를 쓰지 않아도 된다.
코드가 직관적이고 간단하다.