React - React Query(TypeScript)란?

React 대표이미지

 

React Query 란?

React 애플리케이션에서 데이터를 관리하기 위한 JavaScript 라이브러이이다. React Query는 서버에서 데이터를 가져오고 캐시하고 상태를 관리하는데 도움이 된다. 데이터 가져오기, 캐싱, 상태관리등을 간단하게 처리할 수 있다.

 

React Query 핵심

- Data Fetching 단순화

 

기존 방식은 Fetching 코드를 작성하고 데이터를 넣을 상태 생성, useEffect를 사용해 Mount시 Fetching을 해야 했다.

import { useEffect, useState } from "react";

const getData = async () => {
  const data = await fetch(
    "API 주소"
  ).then((response) => response.data);
  return data;
};

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

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

  return <div>{state} </div>;
}

 

위 코드와 같이 작성을 해야 한다. 하지만 React Query를 사용하면 useQuery로 단순하게 처리가 가능하다.

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

const getData = async () => {
  const data = await fetch(
    "API 주소"
  ).then((response) => response.json());
  return data;
};

export default function App() {
  const { data } = useQuery({
  	queryKey : ['data'],
    	queryFn : getData
  });

  return <div>{data}</div>;
}

 

단순하게 작성한 코드이다. 단순하게 작성된 코드 뿐만 아니라 Data Fetching 방식 규격화, enabled를 이용한 동기적 실행을 할 수 있다.

 

동기적실행이 중요한 이유는 비동기적 실행을 하면 API를 호출할 때 데이터가 언제 어떻게 호출이 되는지의 흐름과 시점을 파악하기 어려워진다. 물론 React Query를 쓰지 않아도 동기적실행을 할 수 있다.

const [data, setdata] = useState();
const [data2, setdata2] = useState();

useEffect(()=>{
  getData().then((dataList)=>{
    setdata(dataList[0]);
  })
},[]);

// 다음 API를 호출 할 때 조건문을 달아 동기적 실행을 한다.
useEffect(()=>{
  if(data){
    getAfterData(data).then((dataList)=>{
      setdata2(dataList);
    })
  }
},[data]);

 

useQuery를 사용하면 동기적 실행 방법은 다음과 같다.

const { data: data1 } = useQuery({
	queryKey : ["data1"],
    	queryFn : getServerData,
});

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

 

useQuery에 enabled를 사용하면 간단하게 동기적 실행이 가능하다.

 

- useQuery config 옵션

 

1. enabled

enabled 옵션은 쿼리가 활성화되어 데이터를 가져올 것인지 여부를 나타낸다. 전에 설명했던 것 처럼 동기적 실행에 쓰인다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    enabled : data // data가 ture일 때만 쿼리사용
  });

 

2. retry

retry 옵션은 쿼리를 재시도하는 횟수나 조건을 설정하는 객체이다. 예를 들어 retry : 3, retryDelay : 1000 이라고 설정하면 최대 3번 재시도하며 각 1초마다 재시도 한다는 의미이다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    retry : 3,
    retryDelay : 1000
  });

 

3. onSuccess

onSuccess 옵션은 쿼리가 성공적으로 데이터를 가져왔을 때 실행할 콜백 함수이다. 데이터를 처리하거나 상태를 업데이트하는데 사용된다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    onSuccess : (data) => {
    	console.log("데이터 성공");
        },
  });

 

4. onError

onError 옵션은 쿼리가 실패했을 때 실행할 콜백 함수이다. 오류 처리에 사용된다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    onError : (error) => {
    	console.log("데이터 성공");
        },
  });

 

5. onSettled

onSettled 옵션은 쿼리가 완료되었을 때(성공 또는 실패 모두 포함) 실행할 콜백 함수이다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    onSettled : (data, error) => {
    	if(error){
            	console.log("실패", error);
            } else {
            	console.log("성공", data);
            }
        },
  });

 

6. refetchOnWindowFocus

refetchOnWindowFocus 옵션은 페이지나 탭이 다시 포커스를 받을 때 쿼리를 자동으로 다시 불러올지 여부를 나타내는 부울 값이다. 이 옵션을 ture로 설정하면 페이지가 다시 활성화 될 때 쿼리를 자동으로 다시 실행한다.

  const { data, status } = useQuery({
    queryKey: ['popularList'],
    queryFn: getPopularList,
    refetchOnWindowFocus: true, // 페이지 포커스 시 자동 재시도
  });