react-query의 useQuery 언제 사용할까?

react에서 비동기 로직을 리엑트스럽게 다루게 해주는 라이브러리다. 

기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하기엔 다소 까다롭거나 귀찮은 기능을 제공해준다. 

 

따라서 위와 같은 코드를 구현 할 때 사용한다면 그 매력에 빠지게 될 것이다!

 

 

기존 fetch 방식은 어땠을까?

---

기존 fetch 방식부터 살펴보자!

이 귀찮은 작업들을 React Query를 사용하면 자동으로 실행되게끔 코드를 작성할 수 있다. 

const [coins, setCoins] = useState<ICoin[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
  (async () => {
    const response = await fetch("https://api.coinpaprika.com/v1/coins");
    const json = await response.json();
    setCoins(json.slice(0, 100));
    setLoading(false);
  })(); // 함수를 바로 실행할 수 있는 팁! ()()
}, []);

 

 

React Query를 사용한 방식

---

// useQuery는 fetchCoins 라는 fetcher 함수를 부르고, 
// fetcher 함수가 로딩중이라면 isLoading에서 알려줄 것이고,
// fetcher 함수가 끝났다면 fetchCoins의 json을 data에 넣을 것이다.
const { isLoading, data } = useQuery("allCoins", fetchCoins);

위에서 작성한 fetch 방식을 이 한줄로 대체할 수 있다. 엄청나다!

 

그럼 이제 어떻게 사용하는지 알아보자!

 

 

React Query 사용방법

---

1. React Query를 사용하기 위해서는 QueryClientProvider를 애플리케이션의 최상단에 작성해줘야한다.

2. 그리고 쿼리 인스턴스를 생성하고(new QueryClient()) client={queryClient}를 작성해준다. 

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

3. 이제 useQuery를 추가적으로 import하여 사용하면 된다. 

import { useQuery } from "react-query";
// 주로 사용되는 3가지 return 값 외에도 더 많은 return 값들이 있다. 
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

간단하게 위의 코드를 설명하자면 아래와 같다. 

• 1. useQuery는 queryFn 함수를 부르고, 
• 2. 해당 함수가 로딩중이라면 isLoading에서 알려줄 것이고, => 기존 fetch 방식에서의 loading state 대체
• 3. 해당 함수가 종료되었다면 그 함수의 json을 data에 넣어준다. 

 

React Query hook 더 알아보기

---

queryKey

• queryKey를 기반으로 데이터 캐싱을 관리한다. 
• 문자열 or 배열로 지정할 수 있다. 

queryFn

• promise를 반환하는 함수를 넣어줘야한다. 

options

• 옵션값은 너무너무 다양해서 필요할 때마다 직접 찾아서 사용하면 됩니다. 하단의 참고링크를 보면 다양한 옵션과 옵션에 대한 설명이 적혀있습니다!

 

 

정리하기

---

React Query는

1. 훨씬 편리한 방식으로 데이터를 fetch할 수 있다. 

2. 데이터를 캐시에 저장해주기 때문에 데이터를 유지할 수 있다. 

 

그래서 react-query의 useQuery 언제 사용할까?에 대한 답변은..

데이터를 가져오고 관리할 때 사용하면 된다!

보다 짧은 코드로 직관적으로 사용할 수 있기 때문에 엄청 매력적이다! 기본으로 제공해주는 여러 처리들과 옵션들도 아주 매력적이다. 

 

가장 큰 장점으로는 아래와 같은 것들이 있다. 

1. 데이터 가져오기

2. 데이터 캐싱 및 자동 업데이트

• 데이터를 캐싱하여 이전 결과를 재사용하고, 자동으로 해당 값을 기반으로 업데이트된다. 따라서 데이터를 효율적으로 관리할 수 있고, 자동으로 최신 데이터를 사용할 수 있다. 

3. 데이터 의존성 처리

• 한 쿼리가 다른 쿼리의 결과에 의존하는 경우, 의존하는 쿼리가 업데이트될 때 자동으로 재쿼리하여 관련된 데이터를 가져올 수 있다. 

4. 로딩 및 에러 처리

5. 데이터 변환 및 가공

• queryFn과 option을 사용하여 데이터를 변환하고 가공할 수 있다. 

 

단점으로는..

1. Promise 기반의 비동기 작업을 수행하는 함수와 사용해야 한다. 

2. 성능 고려

• 캐싱 및 자동 업데이트를 제공하기 때문에 데이터가 많은 경우, 빈번한 업데이트가 있는 경우에는 성능에 영향을 줄 수 있기 때문에 쿼리 옵션을 조정하는 등의 관리를 통해 최적의 성능을 유지해야 한다. 

 

참고자료

---

• useQuery 옵션들

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖