React Query를 이용해서 데이터 필터링하기

woohobi·2022년 5월 24일
0
post-thumbnail

진행하고 있는 프로젝트에서 React Query를 사용하고 있는데 데이터를 어떻게 필터링을 적용했는지 이번 포스팅을 통해서 공유하려 합니다.🙌

React-Query란?

React query document에서는 데이터 fetching, caching, synchronizing and updating server state를 도와주는 툴이라고 소개하고 있다. 개발하면서 caching과 비동기를 손 쉽게 다룰수 있다는 점이 많이 와닿는 것 같습니다.

문제 상황


위의 사진은 내가 개인적으로 진행하고 있는 프로젝트의 필터링 부분입니다. 예를 들어, 서울 이라는 지역 키워드를 선택하면, 상세지역에는(area) 홍대, 대학로, 강남 등 서울에 위치한 상세지역만을 필터링 옵션에 보여주어야 합니다.

이를 위해서는 /api/area?city=seoul 와 같은 방식으로 서버에 요청을 해야합니다.

해결 방법

React query 에서는 query key를 기반으로 쿼리 캐싱을 지원하는데, string과 배열을 지원합니다. query key는 데이터에 unique한데 공식 문서에 따르면,
https://react-query.tanstack.com/guides/query-keys#if-your-query-function-depends-on-a-variable-include-it-in-your-query-key 구현한 함수가 변수에 의존하고 있으면, 변수를 queryKey로 같이 사용하는 방법을 소개하고 있습니다.

아래의 코드는 프로젝트의 코드를 재구성하였습니다.


//custom hook 
function useSearchArea(city) {
  return useQuery(["areaList", city], () => fetchAreaList(city));
}

//component
const [city, setCity] = useState("");
const {data} = useSearchArea(city);

이런 식으로 구현할 수 있다. 사용자가 옵션을 선택할 때마다, setCity(value)와 같은 방식으로 city를 업데이트하면, 새로운 query key로 업데이트 되어 서버에서 데이터를 조건에 맞게 fetching 해올 것입니다.

후기

다양한 방법 사이에서 많이 고민했고 시도해봤습니다. queryClient 에서 쿼리 invalidation을 하는 방법이나, 수동적으로 refetch()를 하는 방법 등을 시도해보았지만, 왜 의도처럼 동작하지 않지? 라고 많이 고민하는 과정에서 react query의 철학과 개념에 대해서 많이 학습할 수 있었습니다. 포스팅에서 소개한 방법이 가장 의도에 맞게 동작하고, 깔끔한 코드를 작성할 수 있었습니다.

profile
CDD - Coffee Driven Development

0개의 댓글