useInfiniteQuery로 무한스크롤 검색 리스트 상태 관리 개선

1
2
3
4
5
6
7
8
9
10
11
12
13
14utils/mergeCarsAndPromos.ts

// 차량 리스트 사이에 추천 매물을 끼워 넣음(차량 10대마다 1개)
export const mergeCarsAndPromos = (cars: Car[], promoCars: PromoCar[]) => {
  const merged: (Car | PromoCar)[] = [];

  cars.forEach((car, index) => {
    merged.push(car);
    const promo = promoCars[Math.floor(index / 10)];
    if ((index + 1) % 10 === 0 && promo) merged.push(promo);
  });

  return merged;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39SearchPage.tsx (개선 전)

export default function SearchPage() {
  const [page, setPage] = useState(1);
  // 서버 응답을 복사해 누적하는 리스트 state
  const [displayList, setDisplayList] = useState<(Car | PromoCar)[]>([]);

  const { cars, totalCount, isLoading } = useCarList({ keyword, sort, page }); // 메인 검색
  const { promoCars, promoIsLoading } = usePromoList({ keyword, page }); // 보조 검색(추천 매물)

  // 키워드가 바뀌면 누적 리스트를 직접 초기화
  useEffect(() => {
    setDisplayList([]);
    setPage(1);
  }, [keyword]);

  // 두 API 응답이 모두 도착하면 effect에서 병합해 리스트에 이어 붙임
  useEffect(() => {
    if (cars && !promoIsLoading) {
      setDisplayList([...displayList, ...mergeCarsAndPromos(cars, promoCars ?? [])]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cars, promoCars]);

  // More 버튼 — 페이지 번호를 직접 증가
  const handleMore = () => setPage((prev) => prev + 1);

  return (
    <>
      {displayList.map((item) => (
        <ResultCard key={item.id} item={item} />
      ))}
      {/* More 버튼 노출 조건 — 메인 쿼리 기준으로만 판단 */}
      {!isLoading && totalCount > displayList.length && (
        <MoreButton onClick={handleMore} />
      )}
    </>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55api/useCarList.ts

import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';

interface CarListResponse {
  items: Car[];
  totalCount: number;
}

// axios 응답에서 body만 반환해 이후 데이터 접근을 단순화
const fetchCarList = async (keyword: string, sort: string, page: number) => {
  const { data } = await api.get<CarListResponse>('/cars', {
    params: { keyword, sort, page },
  });
  return data;
};

// select를 쓴 이유: 캐시 원본(응답 전체)은 그대로 두고, 화면에서 쓸 모양(페이지별 items 배열)만 골라내기 위함
// 모듈 레벨에 둔 이유: 컴포넌트 안 인라인 함수는 매 렌더 재생성되어 select 결과의 메모이제이션이 깨짐
const selectCarList = (data: InfiniteData<CarListResponse>) => ({
  pages: data.pages.map((page) => page.items),
  totalCount: data.pages[0]?.totalCount ?? 0,
});

export const useCarList = ({ keyword, sort }: CarListParams) => {
  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery({
      // 키에는 검색 조건만 넣음 — 페이지 번호는 pageParam이 관리하고, 조건이 바뀌면 누적 페이지가 자동 리셋됨
      queryKey: ['carList', keyword, sort],
      // pageParam(페이지 번호)은 TanStack Query가 넘겨줌
      queryFn: ({ pageParam }) => fetchCarList(keyword, sort, pageParam),
      enabled: !!keyword, // 키워드가 있을 때만 호출
      initialPageParam: 1, // 첫 요청은 1페이지
      // 다음 페이지 번호를 계산 — undefined를 반환하면 마지막 페이지(hasNextPage가 false)
      getNextPageParam: (lastPage, allPages) => {
        // 지금까지 불러온 아이템 수
        const loadedCount = allPages.flatMap((page) => page.items).length;
        // 빈 페이지가 오거나 전부 불러왔으면 종료 — totalCount가 어긋나도 More 버튼이 무한히 남지 않도록 방어
        if (lastPage.items.length === 0 || loadedCount >= lastPage.totalCount) {
          return undefined;
        }
        return allPages.length + 1;
      },
      select: selectCarList,
    });

  return {
    carPages: data?.pages ?? [],
    totalCount: data?.totalCount,
    isLoading,
    isFetchingNextPage,
    hasNextPage,
    fetchNextPage,
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33SearchPage.tsx (개선 후)
export default function SearchPage() {
  // 페이지 누적·리셋·다음 페이지 여부를 전부 TanStack Query가 관리
  const { carPages, totalCount, isFetchingNextPage, hasNextPage, fetchNextPage } =
    useCarList({ keyword, sort });
  const { promoPages, promoIsFetchingNextPage, fetchPromoNextPage } =
    usePromoList({ keyword, sort });

  // 캐시에 쌓인 페이지로 렌더 중에 리스트를 계산 — effect + setState 단계가 없어 추가 렌더·깜빡임이 없음
  // useMemo를 쓴 이유: 페이지 데이터가 안 바뀐 렌더에서는 병합을 건너뛰고 이전 배열을 재사용하기 위함
  const displayList = useMemo(
    () => carPages.flatMap((cars, i) => mergeCarsAndPromos(cars, promoPages[i] ?? [])),
    [carPages, promoPages]
  );

  // More 버튼 — 메인/보조 다음 페이지를 함께 요청(페이지 인덱스 1:1 유지)
  const handleMore = () => {
    fetchNextPage();
    fetchPromoNextPage();
  };

  return (
    <>
      {displayList.map((item) => (
        <ResultCard key={item.id} item={item} />
      ))}
      {/* 다음 페이지가 있고 두 쿼리 모두 요청 중이 아닐 때만 노출 */}
      {hasNextPage && !isFetchingNextPage && !promoIsFetchingNextPage && (
        <MoreButton onClick={handleMore} />
      )}
    </>
  );
}