[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(n)검색 결과 react-infinite-scroll과 useInfiniteQuery로 무한 스크롤 구현하기

😅 드디어 2달(?) 정도 긴 기간 동안 진행했던 프로젝트가 진짜 끝을 바라보고 있는 느낌!
🥳 정리해서 한번에 올리려다가 축하 기념(?)으로 오늘 따끈하게 끝낸 react-infinite-scroll+ useInfiniteQuery무한 스크롤 구현에 대해 기록하기로 했다.

⚠️ 프로젝트 라이브러리들 버젼
- "@tanstack/react-query": "^5.37.1"
- "react": "^18.2.0",
- "react-infinite-scroll-component": "^6.1.0"

👉 깃허브에서 레포지터리 구경하러 가기

첫 시도

원래는 좀 복잡한 방식으로 구현을 했었다.

"react-intersection-observer" 라이브러리를 활용해 리스트 마지막 아이템에 ref를 지정하고,

이 ref가 뷰포트에 보이고 hasNextPage===true 일 경우 useEffect내부에서 fetchNextPage()을 하도록 했었다.

 

근데 이 방식은 코드를 엄청 복잡하게 했다.

 

- Props Drilling 이슈

검색 페이지의 데이터 흐름은 다음과 같았다.

[ 검색 페이지의 Tab ] => [ Tab 종류에 따른 Tab컴포넌트 ] => [ Tab 컴포넌트의 리스트 컴포넌트 ] => [ 리스트 컴포넌트의 카드 컴포넌트 ]

 

ref가 뷰포트에 보이는지 확인: innerRef 프롭스는 데이터를 호출하는 [ Tab 종류에 따른 Tab컴포넌트 ] 에서부터 마지막 [ 리스트 컴포넌트의 카드 컴포넌트 ]에서 전달을 반복. 중간의 리스트 컴포넌트는 map을 돌면서 마지막 인덱스에만 innerRef 프롭스를 [ 리스트 컴포넌트의 카드 컴포넌트 ]에 전달.

 

hasNextPage===true 일 경우 : useInfiniteQuery훅으로 간편하게 다음 페이지가 존재하는지 확인.

 

fetchNextPage() : useInfiniteQuery훅으로 다음 페이지 fetch.

 

🤔 목적은 "현재까지 불러온 게시물을 다 봤다면 다음페이지가 있으면 게시물을 가져오기"인데 "현재까지 불러온 게시물을 다 봤는지"를 처리하는 과정이 너무 복잡해졌다.

 

- 코드가 복잡해짐

 

하나의 검색 탭만 해도 저렇게 많은 과정을 거쳐야 한다. 코드량도 불필요하게 많았다.

여기까지도 문젠데, 탭이 artist/albums/tracks/playlist로 각각 달랐고,

각각의 탭도 보여주는 카드의 내용이 조금씩 달라지므로 재사용하는데 한계가 있었다.

 

코드를 간단히 살펴보자.

 

다음은 공통으로 사용할 무한 스크롤 리스트 컴포넌트다.

// 무한 스크롤 리스트 
const InfiniteList = ({
  tabItem,
  currentTabPagingInfo,
  TabList, // <AlbumList/>, <ArtistList/> 등 각각의 탭에 해당하는 카드들 map으로 돌려주는 컴포넌트
  currentTab,
}: InfiniteListProps) => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteSearchList(currentTabPagingInfo?.href);

  const { ref, inView } = useInView();

 // ref가 뷰포트에 보이고, 다음 페이지가 있다면 다음 페이지 가져오기
  useEffect(() => {
    if (inView && hasNextPage) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, fetchNextPage]);
  
  //...생략
  
  // 그려줄 리스트
   const content = data?.pages.map(page => (
    <TabList
      innerRef={ref}
      key={page?.[currentTab]?.href}
      tabItem={page?.[currentTab].items}
    />
  ));
  
    if (!data) {
    return <TabList tabItem={tabItem} />;
  }

  return (
    <>
      {content} // 이전 내용을 유지
      {isFetchingNextPage ? <>{InfiniteCardSkeleton}</> : null} // 로드중이라면 스켈레톤 보이기
      
     </>
  );
};

InfiniteList.Skeleton = InfiniteCardSkeleton;
export default InfiniteList;

 

여기서 아래로는 Card 컴포넌트에 innerRef를 전달해줘야 하고,

const TrackItem = ({ item, artistImgUrls, innerRef }: TrackItemProps) => {
  const artistInfo = useMultiProfileImg({ item, artistImgUrls });
  const [validTrackArtistInfo, setValidTrackArtistInfo] = useState(() =>
    artistInfo?.every(item => item.img !== undefined),
	@@ -33,6 +41,7 @@ const TrackItem = ({
    <Card
      title={item?.name}
      contextUri={item?.uri}
      innerRef={innerRef} // ref 추가
      title_tag={`${item?.album?.name} #${item?.track_number}`}
      topContent={
        item?.album?.images ? (
        // 생략

 

위로는 리스트 컴포넌트에서,

const TrackList = ({ tabItem, innerRef }: TrackListProps) => {
  const artistImgs = useMultiProfileMap({ tabItem });
  return tabItem.map((item, index) =>
    index === tabItem.length - 1 ? ( // 마지막 카드에만 innerRef추가하기
      <TrackItem
        item={item}
        key={item.id}
        innerRef={innerRef}
        artistImgUrls={artistImgs}
      />
    ) : (
      <TrackItem item={item} key={item.id} artistImgUrls={artistImgs} />
    ),
  );
};
// 셍략

 

그리고 최초 데이터 호출 장소인 검색 페이지에서부터 전달을 받아야 한다.

  //...생략
  return (
    <InfiniteList
      tabItem={currentTabItem}
      currentTab={currentTab.tab as keyof SearchResult}
      currentTabPagingInfo={currentTabPagingInfo}
      TabList={currentTab.component}
    />
  );

 

코드량도 그렇고, 구조도 그렇고, DRY원칙도 안 지켜지고, 성능에도 문제가 있을 수밖에 없다.

😖 끔찍한 건 탭이 4개이므로 리스트 map 도는 단계와 리스트 아이템의 코드는 x4를 해줘야 했다.

👩🏻‍💻 구현

1. 설치

yarn add react-infinite-scroll-component

2. 체크리스트

본격적으로 구현하기 전에 체크리스트를 보고 가자. 예시 코드를 토대로 보면 필요한 것들은 다음과 같다.

• react-infinite-scroll 필수 필드
  • ☑ dataLength : 전체 데이터양, 다음 데이터를 렌더 하기 위해 필수
  • ☑ next : 다음 데이터를 가져오기 위한 함수
  • ☑ loader : 다음 데이터 가져오는데 로딩 중 보여줄 요소
  • ☑ hasMore : 다음 데이터의 유무

<InfiniteScroll
  dataLength={items.length} //This is important field to render the next data
  next={fetchData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>Yay! You have seen it all</b>
    </p>
  }
  // below props only if you need pull down functionality
  refreshFunction={this.refresh}
  pullDownToRefresh
  pullDownToRefreshThreshold={50}
  pullDownToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
  }
>
  {items}
</InfiniteScroll>

 

아주 러키 하게도 useInfiniteQuery로 쉽게 위의 필드들을 채울 수 있다.

3. 구현하기

- @/hooks/query/useInfiniteSearchList.ts

import { getPage } from '@/api/spotify';
import { SCOPE } from '@/components/Search/constants';
import { SearchResult } from '@/models/Spotify';
import { useInfiniteQuery } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';

export const useInfiniteSearchList = (url: string) => {
  const [searchParam] = useSearchParams();
  // 현재 탭을 url 파람에서 찾고, 없다면 디폴트인 앨범 탭으로 설정
  const currentScope = (searchParam.get(SCOPE) ??
    'albums') as keyof SearchResult;

  const res = useInfiniteQuery({
    queryKey: useInfiniteSearchList.queryKey(url), // 쿼리키
    initialPageParam: url, // 첫페이지 파람은 호출 시 매개변수로 전달해준 값
    queryFn: ({ pageParam }) => getPage(pageParam), // 호출 쿼리 함수
    getNextPageParam: lastPage => lastPage?.[currentScope]?.next, // 다음 페이지 파람 구하기
    getPreviousPageParam: firstPage => firstPage?.[currentScope]?.previous, //이전 페이지 파람 구하기
  });
  return res;
};
useInfiniteSearchList.queryKey = (keywordUrl: string) => {
  return ['search', 'infinite', keywordUrl];
};

// @/api/spotify.ts
/**
 * 게시물 페이지 가져오기
 */
export async function getPage(endpoint: string) {
  return api
    .get(endpoint, {})
    .json() as unknown as SearchResult;
}

 

getNextPageParam과 getPreviousPageParam은 api 결과에 따라 다르게 구해야 할 수 있다.

스포티파이 api는 다음과 같이 {href:''현재 데이터 url", item:데이터, next:"다음 데이터 url", previous: "이전 데이터 url", total: 전체 데이터 개수}로 (성공 시) 응답한다. 

tanstack query devtool로 살펴본 spotify api 응답 결과 데이터 형태

 

useInfiniteQuery로 구현하면 data는 pages 배열 와 pageParams 배열로 구성된다.

이제 체크리스트에 필요했던 필드들은 useInfiniteSearchList 훅으로 채울 수 있다.

• ☑ dataLength : pages [현재 탭]. total
• ☑ next : ()=> fetchNextPage()
• ☑ loader : {isFetchingNextPage && <스켈레톤/>}
• ☑ hasMore : hasNextPage

InfiniteScroll을 각 탭에서 사용할 수 있지만, 공통으로 묶이는 부분은 따로 컴포넌트로 만들어줘서 재사용할 수 있도록 해보자.

- @/components/Search/SearchResult/TabContent/_shared/InfiniteTab.tsx

import { useInfiniteSearchList } from '@/hooks/query/useInfiniteSearchList';
import { Pagination } from '@/models/Pagination';
import { SearchResult } from '@/models/Spotify';
import InfiniteScroll from 'react-infinite-scroll-component';
import { TabItem, TabList } from '../..';
import Card from '../Card';
import Grid from '../Grid';

const InfiniteTab = ({
  TabList, // 탭의 카드 아이템을 map해주는 컴포넌트
  tabItem, // 처음 페이지의 데이터
  currentTabPagingInfo, // href, next, previous 등 페이지에 관한 정보
  tab, // 어떤 탭인지 searchParam 'scope=`${artist,album,playlist,track}`'와 동일한 정보
}: {
  TabList: TabList;
  tabItem: TabItem;
  currentTabPagingInfo: Pagination;
  tab: keyof SearchResult;
}) => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteSearchList(currentTabPagingInfo.href);

  // useInfiniteSearchList의 data는 
  // {page:[{현재탭:items:[우리가 필요한 데이터]}]} 형태로 되어 있다.
  // reduce로 우리가 필요한 데이터로만 이루어진 배열을 만들어준다.
  const infiniteItemList = data?.pages.reduce((acc, page) => {
    return [...acc, ...page?.[tab].items];
  }, [] as TabItem);

  return !infiniteItemList ? (
    <Grid>
      <TabList tabItem={tabItem} /> // 처음에는 1페이지 데이터를 보여준다.
    </Grid>
  ) : (
    <InfiniteScroll
      next={() => fetchNextPage()}
      hasMore={hasNextPage}
      dataLength={infiniteItemList?.length || 0}
      loader={<></>} // block 디스플레이 형태때문인지 grid 모양을 유지하기 위해 비워두고 아래 추가
    >
      <Grid>
        <TabList tabItem={infiniteItemList} />
        {isFetchingNextPage &&
          Array.from({ length: 20 }, (_, index) => (
            <Card.Skeleton key={index} /> // 카드 스켈레톤
          ))}
      </Grid>
    </InfiniteScroll>
  );
};

export default InfiniteTab;

 

이제 이 컴포넌트를 데이터를 처음 호출하는 최상단의 페이지에서 쓰기만 하면 된다.

 

- @/components/Search/SearchResult/TabContent/index.tsx

import { useSearchKeyword } from '@/hooks/query/useSearchKeyword';
import { Album } from '@/models/Album';
import { Pagination } from '@/models/Pagination';
import { Playlist } from '@/models/Playlist';
import { Artist } from '@/models/Profile';
import { SearchResult } from '@/models/Spotify';
import { Track } from '@/models/Track';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SCOPE, TAB } from '../../constants';
import Grid from './_shared/Grid';
import InfiniteTab from './_shared/InfiniteTab';
import AlbumTab from './AlbumTab';
import ArtistTab from './ArtistTab';
import PlaylistTab from './PlaylistTab';
import TrackTab from './TrackTab';

export type TabItem = Album[] | Artist[] | Track[] | Playlist[];
export type TabList = ({ tabItem }: { tabItem: TabItem }) => JSX.Element[];

const tab = [
  {
    tab: TAB.ALBUMS,
    label: '앨범',
    component: AlbumTab, // 탭 리스트 map한 컴포넌트
  },
  {
    tab: TAB.ARTISTS,
    label: '아티스트',
    component: ArtistTab,
  },
  {
    tab: TAB.TRACKS,
    label: '트랙',
    component: TrackTab,
  },
  {
    tab: TAB.PLAYLISTS,
    label: '플레이리스트',
    component: PlaylistTab,
  },
] as { tab: keyof SearchResult; label: string; component: TabList }[];

export default function TabContent() {
  const { data, isFetched, isLoading } = useSearchKeyword();
  const [searchParam] = useSearchParams();
  const [currentTab, setCurrentTab] = useState(tab[0]);
  const [currentTabPagingInfo, setCurrentTabPagingInfo] =
    useState<Pagination | null>(null);
  const [currentTabItem, setCurrentTabItem] = useState<TabItem | null>(null);

  useEffect(() => {
    const changedTab = tab.filter(
      tabItem => searchParam.get(SCOPE) === tabItem.tab,
    );
    if (isFetched && data != null) {
      const { items, ...pageInfo } =
        data[(searchParam.get(SCOPE) ?? tab[0].tab) as keyof SearchResult];
      setCurrentTabPagingInfo(pageInfo);
      setCurrentTabItem(items);
    }

    if (changedTab.length === 0) {
      setCurrentTab(tab[0]);
    } else {
      setCurrentTab(changedTab[0]);
    }
  }, [searchParam, data, isFetched]);

  if (isLoading || currentTabPagingInfo == null || currentTabItem == null) {
    return <Grid.Skeleton />;
  }

  return (
    // 사용!
    <InfiniteTab 
      TabList={currentTab.component}
      tab={currentTab.tab}
      tabItem={currentTabItem}
      currentTabPagingInfo={currentTabPagingInfo}
    />
  );
}

🍀 완성 모습

react-infinite-scroll-component + useInfiniteQuery

👩🏻‍💻 마치면서

😅 헤맨 점 (TMI)
원래는 페이징 구조로 만들려다가.. api와 부적합하였기 때문에 무한 스크롤로 변경
다음 페이지 가져오게 하려면 어떻게 해야 하지 헤맸었다.  처음에는 일일이 offset+limit으로 구해주려 했다.
const tab의 component 타입이 조금씩 달라서 ts가 계속 불평..😡 결국은 타입 단언을 해줬는데 이게 맞나? 싶기도 하다.

🫨 아쉬운 점
안 보이는 부분은 리스트 데이터를 굳이 지니고 필요가 없는데도 메모리 낭비를 하고 있는 것 같다.
그리고 새로고침을 하면 해당 스크롤 위치의 데이터를 유지하지 못한다는 점에서 한번 가상 리스트를 구현해보고 싶다!

 

---

📚 References

https://www.npmjs.com/package/react-infinite-scroll-component

react-infinite-scroll-component

https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery#useinfinitequery

useInfiniteQuery | TanStack Query React Docs