[UI] 무한 스크롤(feat: UI 요소 직접 만들기)

💡무한 스크롤이란?

인피니트 스크롤(Infinite Scroll)은 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠를 자동으로 로드하는 기술입니다. 페이지를 명시적으로 넘기는 페이지네이션 방식과 달리, 사용자가 끝없이 콘텐츠를 탐색할 수 있도록 설계된 방식입니다.

인피니트 스크롤은 다음과 같은 이점이 있습니다.

• 끊김 없는 사용자 경험(UX) 제공
• 페이지 로딩 없이 새로운 콘텐츠 표시
• 사용자의 체류 시간 증가
• 모바일 환경에서 직관적인 내비게이션 가능

이 기술은 소셜 미디어 피드나 뉴스 사이트 등 지속적인 콘텐츠 소비가 필요한 환경에서 많이 사용됩니다.

🤔고민할 점

페이지네이션 vs 무한 스크롤

• 인피니트 스크롤은 페이지네이션보다 직관적이지만, 특정 데이터로 이동하는 기능이나 필터링, 검색 기능이 추가되었을 경우 구현 난이도가 어려워질 수 있습니다.
• 페이지네이션의 경우에는 새로고침시에도 현재 페이지를 유지하는데 어렵지 않지만, 무한 스크롤의 경우에는 구현방법에 대한 고민이 필요합니다.

성능 최적화

• 무한 스크롤로 인해 많은 양의 DOM이 생성될 수 있으며, 무한한 데이터의 경우 웹 브라우저의 심각한 부하를 줄 수 있습니다. 피드나 메신저 같이 무한한 데이터는 가상스크롤 기능을 고려해보아야 합니다.
• 스크롤과 관련된 코드가 잘못 작성되었을 경우 많은 양의 API호출을 발생시켜 문제를 일으킬 수 있습니다. 이런 경우를 방지하고자 디바운스나 스로틀링과 같은 최적화가 필요합니다.

사용자 경험

• 유저의 별다른 액션이 없이 스크롤 이벤트만으로 데이터가 패칭되기 때문에, 데이터가 패칭 될 때 스켈레톤이나 스피너와 같이 데이터가 받아오는 중이라는 피드백이 필요합니다.

 

❗️구현 내용

useInfiniteFetcher

const useInfiniteFetcher = () => {
  const [state, setState] = useState<FetchState<Datum>>({
    state: 'idle',
    data: [],
  })

  const fetchNextPage = useCallback(async () => {
    setState(prev => ({
      ...prev,
      state: 'loading',
    }))

    const nextPageData = await generatePageData()

    setState(prev => {
      const nextData = [...(prev.data || []), nextPageData]
      return {
        data: nextData,
        state: 'fetched',
      }
    })
  }, [])

  return {
    ...state,
    fetchNextPage,
  }
}

useInfiniteFetcher 훅은 인피니트 스크롤을 위한 데이터를 관리하는 커스텀 훅입니다.

• 상태(state)를 관리하여 데이터 로딩(loading), 로드 완료(fetched), 초기 상태(idle)를 구분하며
• fetchNextPage 함수를 호출하면 비동기적으로 데이터를 가져와(state 변경 후) 기존 데이터에 추가합니다.

TQ 를 사용하는 경우 useInfiniteQuery를 활용해 위와 같은 동작을 하는 함수를 활용할 수도 있습니다. 임시로 위 훅을 사용해 랜덤 한 데이터를 반환하는 promise 구현하였습니다.

위 훅에서 추가적인 기능을 넣는다면, 에러 처리와 중복 요청을 막고, 현재 보고있는 페이지를 관리할 수 있도록 기능을 추가할 수 있을 것으로 예상됩니다.

useInfiniteScroll

const useInfiniteScroll = () => {
  const { data, state, fetchNextPage } = useInfiniteFetcher()
  const moreRef = useRef<HTMLDivElement>(null)
  const {
    entries: [entry],
  } = useIntersectionObserver(moreRef, ioOptions)
  const isIntersecting = entry?.isIntersecting

  useEffect(() => {
    if (isIntersecting) fetchNextPage()
  }, [isIntersecting])

  return { data, state, moreRef }
}

export default useInfiniteScroll

이전에 소개한 useIntersectionObserver를 활용한 훅입니다. 데이터 가장하단에 히든요소를 넣고, 그 요소가 현재 뷰포트에 보이면 useInfiniteFetcher의 fetchNextPage를 호출하도록 하였습니다.

infinite scroll 은 위 두 개의 훅을 활용하면 쉽게 구현할 수 있습니다. 하지만, 서비스마다 스크롤 유지나, 데이터 필터링 및 검색 기능, 가상스크롤 등의 요구사항이 생길 수 있습니다. 그럴 때는 위 두 개의 훅을 기본으로 각각 요구사항에 맞는 기능을 추가할 필요가 있습니다.