React Query

1. React Query

비동기 통신을 위한 미들웨어
Redux-thunk에 비해
1. 코드량이 적다. (보일러 플레이트)
2. 내가 만든 부분이 아니기 때문에 잘못이 일어나도 내 탓이 아니다!
3. 사용법이 쉽다!
라는 강점이 있다.

주요 기능

Query

• 데이터에 대한 요청
• axios의 get과 비슷하다 생각하면 된다.

Mutation

• 어떤 데이터를 변경
• 추가, 수정, 삭제 (Create, Update, Delete)

Query Invalidation

• 데이터를 최신 상태로 가져온다.
• 새로고침하지 않아도 최신의 데이터가 화면에 불러와진다.

실습

react-query 설치

yarn add react-query

App.jsx

const App = () => {

  return (
    <QueryClientProvider client={queryClient}>
      <Router />;
    </QueryClientProvider>
  );
};

최상위에 Query Client Provider로 감싸주어 모든 컴포넌트들에 적용시킨다.

useQuery

src/api 디렉토리를 생성 후 api를 관리할 todos.js라는 파일을 만든다.

src/api/todos.js

import axios from "axios";

// 모든 todos를 가져오는 api
const getTodos = async () => {
  const response = await axios.get(`서버주소`);
  return response;
};

export { getTodos };

데이터 불러오기

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

React Query는 isLoading과 isError에 따라 별도의 처리를 해주기 때문에 대기상태 처리와 오류 처리에 대한 부분도 아주 쉽게 해결되어 있다.
구조분해를 통해 불러온 data라는 변수에는 서버에 있는 데이터 값들이 저장되어 있다.