📖 TIL - Tanstack Query 데이터 필터링과 React Router 구성하기

📌 알아야 할 개념

tanstack-query에서 useQuery를 사용하던 도중 일부 데이터만 필요한 상황이 발생하였다. 그렇기에 데이터를 필터링 하는 여러가지의 방법들을 정리해보려고 한다.

1. Tanstack Query 데이터 필터링의 3가지 방법

// 1. 클라이언트에서 직접 필터링
const { data } = useQuery({
  queryKey: ["items"],
  queryFn: getItems
});
const filteredData = data?.filter(item => /* 필터링 조건 */);

// 2. 서버에 필터링 조건 전달
const { data } = useQuery({
  queryKey: ["items", filterCondition],
  queryFn: ({ queryKey }) => getItems(queryKey[1])
});

// 3. select 옵션으로 필터링
const { data } = useQuery({
  queryKey: ["items"],
  queryFn: getItems,
  select: (data) => data.filter(item => /* 필터링 조건 */)
});

2. React Router의 라우트 구성 방법

// 1. 기본 라우트
<Route path="/items" element={<ItemList />} />
<Route path="/items/:id" element={<ItemDetail />} />

// 2. 중첩 라우트 (추천!)
<Route path="/items">
  // index routes 를 사용하면, 일치하는 경로가 없는 경우에 기본 페이지를 표시할 수 있으며, 코드의 가독성과 유지 보수성도 향상된다.
  <Route index element={<ItemList />} />
  <Route path=":id" element={<ItemDetail />} />
</Route>

2-1. 상세 페이지 구현할 때

const ProductDetail = () => {
  const { id } = useParams();
  const { data } = useQuery({
    queryKey: ['product', id],
    queryFn: () => getProduct(id)
  });

  if (!data) return <div>로딩중...</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
    </div>
  );
};

✨ 언제 어떤 방식을 써야 할까?

1. 클라이언트 필터링 사용할 때

• 데이터가 적을 때 (수백 개 이하)
• 여러 필터링 조건을 자주 바꿔야 할 때
• 즉각적인 UI 응답이 필요할 때

2. 서버 필터링 사용할 때

• 데이터가 많을 때
• 페이지네이션이 필요할 때
• 검색 기능이 필요할 때

3. select 옵션 사용할 때

• 원본 데이터도 필요하고, 필터링된 데이터도 필요할 때
• 캐시된 데이터를 재활용하고 싶을 때

방법	특징
filter() 사용	클라이언트에서 필터링 (간단하고 빠름)
queryKey 활용	백엔드에서 필터링 (불필요한 데이터 요청 방지)
select 활용	useQuery에서 바로 필터링 (깔끔한 코드)

🚀 실제 사용 예시

// 검색어로 필터링이 필요한 경우
const SearchResults = () => {
  const [searchTerm, setSearchTerm] = useState('');
  
  const { data } = useQuery({
    queryKey: ['search', searchTerm],
    queryFn: () => searchItems(searchTerm),
    enabled: searchTerm.length > 0  // 검색어가 있을 때만 API 호출
  });

  return (
    <div>
      <input 
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <div>
        {data?.map(item => (
          <div key={item.id}>
            <Link to={`/items/${item.id}`}>{item.name}</Link>
          </div>
        ))}
      </div>
    </div>
  );
};

⭐️ 중요 포인트

1. 데이터 크기와 사용 패턴에 따라 적절한 필터링 방식 선택
2. 중첩 라우트로 관련 페이지들을 구조화
3. params나 queryKey를 활용해 필요한 데이터만 가져오기