[React] React-Query 활용 (1)

 

이번 프로젝트에서 React Query의 useQuery를 사용한 것에 대해 기록하면서 더 공부해보려고 글을 작성한다.

 

* 참고 자료 (2023.04.11 구글)

https://tech.kakaopay.com/post/react-query-1/

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

 

 

1. React-Query

---

React-Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다. Hook을 사용하여 React Component 내부에서 자연스럽게 서버의 데이터를 사용할 수 있는 방법을 제안한다.

 

 

2. 세팅

---

우선 React-Query 사용을 위해 App.tsx 파일에 세팅을 해준다.

defaultOption에는 refetchOnWindowFocus를 false로 설정해두었는데, 기본값은 true이다.

설정을 하기 전에는 useQuery로 서버로부터 데이터를 조회 시 페이지 전환을 했을 때에도 계속해서 request를 호출을 하는데 자동으로 refetch가 이루어지기 있기 때문이다.

상품 데이터가 자동으로 refetch 되는 것은 아직은 불필요하다고 생각해 전역적으로 false 값을 설정해두었다.

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

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

export default App;

 

 

3. useQuery

---

useQuery는 GET 요청과 같이 서버에 저장되어 있는 "상태"를 불러와 사용할 때 사용한다.

나는 optional 값을 쓰지않고 필수값인 queryKey, fetchFn 로 API를 요청해 사용했고, 데이터를 불러오는 중에는 로딩페이지를 보여주었다.

- queryKey : Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key

- fetchFn : Query 요청을 수행하기 위한 Promise를 Return하는 함수

// getProducts.ts
import axios from "axios";

export const getProducsts = async () => {
  const response = await axios.get(url);

  return response.data;
};

// ItemList.tsx
import { useQuery } from "react-query";
import { getProducsts } from "../Common/getProducsts";

export default function ItemList() {
  const { data, isLoading } = useQuery("products", getProducsts);

  if (isLoading) {
    return <Loading />;
  }

  return (
    <Wrapper>
      {data?.map((item) => (
            <Link to={`/trade/${item.id}`} key={item.id}>
              <Image src={item.image} alt={`${item.name_kr} 이미지`} />
              <Brand>{item.brand}</Brand>
              <Name>{item.name_kr}</Name>
              <Price>{priceFormat(item.price)}원</Price>
            </Link>
      )}
    </Wrapper>
  );
}

 

 

4. 후기 & 다음은!

---

useQuery를 이용했을 때 다른 방식들과 달리 React Component 내부에서 간단하게 API를 사용할 수 있었다. 복잡하고 길었던 코드에 비해서 코드 한 줄로 매우 편했다.

공부하면서 React-Query와 관련된 글들을 읽고, 내 프로젝트에 적용한 것 이외에 정확한 내용과 사용법들을 기록해두면 좋을 것 같았다. 그건 추후에 정리해서...!

또한, 공부하면서 기존에 진행했던 프로젝트에 추가해보고 싶은 기능도 생겼다.

useMutaion의 Mutation 요청을 통해 POST, PUT, DELETE 요청과 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시키는 것에 대해 공부하고, 이어지는 게시글은 Mutation 관련해서 기록해봐야겠다.