[React] react-query, 리액트 쿼리를 사용해야 하는 이유

📒 react-query를 사용해야 하는 이유

---

리액트에서 상태 관리를 위한 라이브러리는 무수히 많습니다.

대표적으로 redux, recoil 같은 라이브러리가 있는데,
대부분 이러한 상태 관리 라이브러리를 사용하며
클라이언트 상태와 서버 상태를 함께 담아두고 있는 경우가 대부분이고, 또 그럴 수 밖에 없었습니다.

 

react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에
직관적이고 효율적인 관리가 가능해집니다.

 

이 외에도 react-query에서 지원하는 다양한 옵션들을 사용해
캐싱, 에러처리, suspense, refresh, data fetching 조건 설정 등등
기존에 불편하게 느꼈던 부분들을 선언적이고 간편하게 이용할 수 있도록 도와줍니다.

 

그럼 react-query를 사용할 때 누릴 수 있는 이점들을 알아보겠습니다.

---

새롭게 업데이트 된 react-query v5 버전에 관한 내용들을 빠르게 알아보고 싶으면 다음 글을 참고해주세요!

react-query v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary

---

📌 Data Fetching 로직 단순화

기존에 서버에서 데이터를 가져오기 위해서는 다음과 같은 절차가 필요했습니다.

1. Fetching 코드 작성
2. 데이터를 담아 둘 상태 생성
3. useEffect를 이용해 컴포넌트 Mount시 데이터를 Fetching 한 뒤 상태에 저장

import { useEffect, useState } from "react";

const getServerData = async () => {
  const data = await fetch(
    "https://jsonplaceholder.typicode.com/posts"
  ).then((response) => response.json());
  return data;
};

export default function App() {
  const [state, setState] = useState<any[]>([]);

  useEffect(() => {
    getServerData()
      .then((dataList) => setState(dataList))
      .catch((e) => setState([]));
  }, []);

  return <div>{JSON.stringify(state)}</div>;
}

 

위와 같은 코드를 react-query를 사용한다면 다음과 같이 바꿀 수 있습니다.

 

import { useQuery } from "@tanstack/react-query";

const getServerData = async () => {
  const data = await fetch(
    "https://jsonplaceholder.typicode.com/posts"
  ).then((response) => response.json());
  return data;
};

export default function App() {
  const { data } = useQuery(["data"], getServerData);

  return <div>{JSON.stringify(data)}</div>;
}

서버 데이터를 담을 상태를 만들고 useEffect로 상태에 데이터를 담는 모든 과정을
useQuery 단 한줄로 처리할 수 있습니다.

이로 인해 발생하는 장점은 다음과 같습니다.

 

🔎 코드 수 감소

일반적인 서버 데이터를 받아오는 과정의 코드가 그래도 얼마 안되겠다고 생각하겠지만
받아 올 서버 데이터에 비례해서 추가되는 상태와 Side Effect를 생각하면 굉장히 강력한 장점입니다.

 

🔎 Side Effect 제거

특히나 상태마다 작성해주어야 하는 useEffect를 걷어낼 수 있다는 것은
서버 데이터로 발생하는 장황한 Side Effect로 인해 흐름 파악을 어렵게 만들었던 문제를 해결합니다.

 

🔎 Data Fetching 방식 규격화

서버에서 데이터를 불러오는 방법에 명확한 정답은 없기 때문에
개발자들마다 개개인의 방식대로 데이터를 불러오는 코드를 작성합니다.

 

그렇기 때문에 제각각으로 useEffect를 사용하다보니
자신이 짠 코드라도 전체적인 흐름을 파악하는 것이 쉽지 않았고,
다른 사람이 작성한 코드를 보며 수정하는 일은 더욱더 어려웠습니다.

 

그러나 react-query가 내장된 기능으로 관련 로직들을 전부 처리해주니
지원하는 훅을 이용해 모두가 획일화 된 방식으로 코드를 작성할 수 있습니다.

 

📌 동기적 실행

어떠한 API를 호출하기 위해 다른 API의 값을 파라미터로 넣어줘야될 때가 있습니다.

 

그러기 위해선 동기적으로 API를 호출해주어야 합니다.

 

const [state1, setState1] = useState();
const [state2, setState2] = useState();

useEffect(()=>{
  getServerData().then((dataList)=>{
    setState1(dataList[0]);
  })
},[]);

// state1의 데이터를 파라미터로 넣어 호출하는 API
useEffect(()=>{
  if(state1){
    getAfterData(state1).then((dataList)=>{
      setState2(dataList);
    })
  }
},[state1]);

 

간략하게 표현해봤는데도 코드양이 많습니다.

게다가 API 호출을 위한 조건도 추가되어 동기적으로 관리가 필요하고,
useEffect의 순서가 다른 코드들과 섞인다면
어떤 데이터가 언제, 어떻게 호출 되는지 흐름과 시점을 파악하기 어려워집니다.

 

const { data: data1 } = useQuery(["data1"], getServerData);
const { data: data2 } = useQuery(["data2", data1], getServerData, {
  enabled: !!data1
});

react-query 옵션 중 enabled 은 조건이 충족될 때만 API를 호출하게 되어
위와 같이 정말 간단하게 API를 동기적으로 호출할 수 있습니다.

 

📌 캐싱

훅을 호출할 때 다음과 같은 옵션을 사용하면 리액트 쿼리의 캐싱 기능을 이용할 수 있습니다.

• staletime
  호출한 데이터는 리액트 쿼리 자체적으로 저장을 해둡니다.
  staletime은 이 캐시데이터의 유통기한을 정해주는 옵션입니다.
  default는 0으로, 별다른 옵션 세팅을 해주지 않는다면
  데이터가 stale하다고 판단하여 캐싱 기능을 이용할 수 없습니다.
• cachetime
  cashetime은 저장한 데이터를 얼마나 유지할지 정해주는 옵션입니다.
  default는 5분입니다.

const { data } = useQuery(['data', getServerData,{
  staletime: 10 * 60 * 1000;
  cashetime: 10 * 60 * 1000;
})

위와 같이 옵션을 지정해주면 별다른 refresh가 없을 때
10분 내 재호출시 API를 호출하지 않고 캐싱된 데이터를 제공해줍니다.

 

📌 Suspense 사용

Suspense에 관련된 자세한 이야기는 전에 작성해뒀던 글을 참고해주세요.

2023.03.23 - [Web/React] - [React] Suspense을 사용해 선언적으로 로딩 화면 구현하기

[React] Suspense을 사용해 선언적으로 로딩 화면 구현하기

 

📌 마무리

제가 생각하기에 가장 사용해보고 싶은 기능들 위주로 설명해봤지만
이 외에도 에러처리와 다양한 데이터 refresh 방법, data update 등등 더 많은 장점이 존재하기 때문에
다음 프로젝트에서 반드시 사용해보고 싶다는 생각을 해봅니다.