0706-TIL-React Query

React Query

thunk는 보일러 플레이트 코드량이 많고, 비동기 데이터 관리가 어렵다.

그에 비해 Query는 쉽고 직관적이게 사용할 수 있다는 장점이 있다.

 

• Query : 데이터에 대한 요청
• Mutation : 데이터를 변경
• Query Invalidation : Query를 무효화 시키는 것

 

패키지 설치

yarn add react-query

 

가장 상위의 컴포넌트인 App.jsx에서 QueryClient를 불러와야 한다.

데이터를 읽어오는 기능을 App 전체에 주입하는 과정이다!

const queryClient = new QueryClient();

 

데이터 서버는 json-server를 사용할 것이고,

데이터를 불러오는 api는 axios를 사용할 것이다.

 

axios api관련 내용을 전부 넣어놓을 수 있는 js파일을 생성한다.

 

todos.js

import axios from "axios";

// 모든 todos를 가져오는 api
const getTodos = async () => {
  const response = await axios.get("http://localhost:3000/todos");
  return response;
};

export { getTodos };

 이 파일에서 생성한 getTodos를

불러온 데이터가 필요한 컴포넌트에서 import해서 사용하면 된다!

 

Todolist.jsx

import { getTodos } from "../../../api/todos";
import { useQuery } from "react-query";

function TodoList({ isActive }) {
  const { isLoading, isError, data } = useQuery("todos", getTodos);

  if (isLoading) {
    return <p>로딩중입니다....!</p>;
  }

  if (isError) {
    return <p>오류가 발생하였습니다...!</p>;
  }

.
.
.
return()}

react-query로 데이터를 불러올 때는 useQuery를 사용하면 된다.

useQuery에 인자는 2개를 줘야하며,

첫번째 인자는 query-key이고, 두 번째 인자는 query functions이다!

 

useQuery로 불러온 데이터 안에는 isLoading과 isError, data가 전부 담겨있다.

thunk를 이용할 때는 isLoading과 isError를 직접 state로 만들어줘야 하는 불편함이 query에서는 없다!

 

불러온 isLoading과 isError는 조건문을 통해 화면에 보여줄 결과값을 return해 주는 식으로 사용할 수 있다.