[개발] React-query를 활용한 데이터 필터링

저번 포스팅에서는 React-query를 활용하여 custom hook을 만들어 사용하는 과정을 소개했다. 이번에 다뤄볼 내용은 React-query를 활용한 데이터 필터링이다. 아띠즈 프로젝트에서 해당 데이터 필터링 기능이 사용되는 컴포넌트가 몇개 있었지만, 그 중에서 검색된 작품들의 경매상태가 경매중인지 경매 완료인지 필터링하는 기능에서 React-query를 사용했던 부분에 대해 다뤄보려고 한다.

 

React-query select 옵션

select 옵션을 사용하지 않고 데이터를 직접 가공하여 state로 관리하는 방법을 사용할 수 있겠지만, React-query에서 제공하는 select 옵션을 사용하면 클라이언트 단에서 필터링을 진행하지 않을 수 있다. select 옵션은 React-query를 통해 반환된 쿼리 결과 데이터를 2차적으로 가공할 때 사용하는 옵션으로 select 옵션에 selector 함수를 전달할 수 있는데, 전달한 함수는 데이터를 2차 가공하는 데 사용되는 함수다.

데이터 필터링 예시

import { useGetSearch } from '@hooks/queries/useGetSearchArtWork';
import FilterDropdown from '@components/search/FilterDropdown';

export default function Search() {
  const [status, setStatus] = useState<string[]>([]);
  const { data: searchResults } = useGetSearch(searchWord, status);
  ...
  return (
  ...
  <div>
    <FilterDropdown setStatus={setStatus} />
    <div className="mt-6 grid grid-cols-2 items-center justify-items-center gap-y-5">
    {searchResults?.map((artwork: SearchArtWork, idx) => (
      <SearchItem artwork={artwork} key={+idx} />
    ))}
    </div>
  </div>
  ...
  )

Search 컴포넌트 내에서 작품의 경매상태를 status를 관리하고 setStatus 함수를 FilterDropDown 컴포넌트의 prop으로 전달한다.

또한 검색 결과는 custom hook을 사용하여 받아온 데이터를 searchResults라는 새로운 변수명으로 할당하여, 검색 결과를 보여주도록했다.

FilterDropDown 컴포넌트

FilterDropDown으로 전달한 setStatus함수를 통해 해당 필터를 클릭한 경우에 따라 그에 맞는 status를 배열에 넣고, 그렇게 해당 status를 검색한 단어와 함께 custom hook의 인자로 전달한다. 해당 custom hook은 다음과 같다. useQuery를 custom hook으로 만들어서 사용한 부분은 지난 포스팅에서 다뤘기 때문에 참고하길 바란다.

import artworkApi from '@apis/artwork/artworkApi';
import { useQuery } from 'react-query';

export const useGetSearch = (word: string, status: string[]) => {
  return useQuery<SearchArtWork[], Error>(
    ['useGetSearch', word],
    () => artworkApi.getSearchArtwork(word),
    {
      enabled: !!word,
      select: (arts) => {
        if (status?.length === 0) {
          return arts;
        } else {
          const selected = arts.filter((art) => status.includes(art.status));
          return selected;
        }
      },
    },
  );
};

select 옵션으로 전달한 selector 함수의 파라미터로는 쿼리 함수의 결과값인 데이터를 리턴해준다. 따라서 해당 리턴 값을 art로 받아와 해당 art가 가지고 있는 status값이 custom hook으로 전달한 status에 포함되어있는 값으로만 이루어져 있는 새로운 데이터 배열인 selected를 리턴하도록한다. 이렇게 오늘은 react-query를 이용한 데이터 필터링에 대해서 알아보았다. 이 글을 보는 다른 개발자 분들에게도 조금이나마 도움이 되었으면 하는 바람이다.