리액트 - React Query

이한결·2023년 2월 22일

react-query 스파르타 코딩 여정 45일차 항해99

부트 캠프

목록 보기

61/98

2월 22일 여정 45일차이다.

사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.

오늘은 이전에 복잡하게 사용했던 Redux Tunk가 아닌 보다 간단하고 직관적인 React Query를 보고자한다.

오늘의 Today I Learned

리덕스 thunk는 미들웨어로써 사용을 해왔다. 그러나
Redux-thunk, Redux-Saga 등에는 다음과 같은 문제가 있다.

보일러 플레이트 : 코드량이 너무 많아요.
규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제)

그러다보니 이점을 해결하고자 리액트 쿼리가 나왔다.
그럼 리액트 쿼리의 장점은 무엇일까?

보일러 플레이트 만들다가 오류날 일이 없다.
내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다.
사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.

그럼 리액트 쿼리에서 쓰이는 주요 키워드를 보자.

1. Query

axios의 get 요청과 비슷하다.

const response = await axios.get(’http://localhost:3000/todos’)

2. Mutation

어떤 데이터라 함은, 데이터 그룹 그 자체를 의미한다.
바꾼다는 것은 추가, 수정, 삭제를 의미해요. CRUD 중, CUD에 해당한다.
(Create, Update, Delete)
axios의 경우 post, put, patch, delete 요청과 비슷하다.

axios.post(’http://localhost:3000/todos’., newTodo);
axios.patch(`http://localhost:3000/todos/${id}`, {isDone: true});

3. Query Invalidation

기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있다. 그렇기 때문에 ‘최신 상태가 아닐 수’ 있다. 그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 한다.

이런 과정을 React Query에서는 알아서 해준다. 그 유용한 기능이 바로 Query Invalidation이다.

그럼 실제 코드를 보자.

App.jsx

const queryClient = new QueryClient();

const App = () => {

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

먼저 이렇게 QueryClientProvider로 감싸준다.

api > todos.js

import axios from "axios";

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

export { getTodos };

get으로 유저의 정보를 받아온다.

Todolist.jsx

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

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

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

이 부분이 React Query가 가지고 있는 큰 장점이라 할 수 있다. Thunk를 이용하면 isLoading, isError등을 개발자가 직접 만들어줬어야 했다. state에서 말이다.
React Query는 서버 데이터를 위한 표준을 이미 제시하고 있기 때문에 개발자들 마다의 특성에 따라 바뀔 염려가 없다.

추가기능 구현

api > todos.js

const addTodo = async (newTodo) => {
  await axios.post(`${SERVER_URI}/todos`, newTodo);
};

api에서 axios로 데이터를 보낸다.

const queryClient = new QueryClient();
	
	const mutation = useMutation(addTodo, {
	  onSuccess: () => {
	    // Invalidate and refresh
	    // 이렇게 하면, todos라는 이름으로 만들었던 query를
	    // invalidate 할 수 있다.
	    queryClient.invalidateQueries("todos");
	  },
  });

[invalidate의 과정]

Input.jsx에서 값 입력으로 인해 서버 데이터가 변경됨

→ onSuccess가 일어나면 기존의 Query인 “todos”는 무효화

→ 새로운 데이터를 가져와서 “todos”를 최신화시킴

→ TodoList.jsx를 갱신함