인터랙션

[Infinite Scroll] 무한 스크롤

사용자가 페이지 하단으로 스크롤할 때 자동으로 다음 데이터를 로드합니다. SNS, 뉴스피드, 쇼핑몰에서 필수적인 패턴입니다.

Intersection Observer APIReact Hooks페이지네이션

라이브 데모

새 탭에서 열기

데모 불러오는 중…

제작 과정

한 줄 요약

스크롤할 때마다 자동으로 데이터를 로드해 사용자가 끊김 없이 콘텐츠를 볼 수 있게 합니다.

이럴 때 필요해요

페이스북 뉴스피드, 인스타그램 피드, 트위터 타임라인처럼 끝이 없는 콘텐츠를 표시해야 할 때 유용합니다. "더보기" 버튼을 누르도록 강제하는 것보다 사용자 경험이 훨씬 좋습니다.

어떻게 동작하나

초기 데이터 10개를 로드해서 표시
페이지 하단에 보이지 않는 감지 대상 요소 배치
Intersection Observer가 그 요소를 감지하면 다음 10개 로드
로드 중엔 스켈레톤 로딩 표시
더 이상 데이터 없으면 "모든 데이터 로드됨" 메시지 표시

놓치기 쉬운 것

rootMargin을 너무 크게 설정하면 로딩이 너무 일찍 시작되고, 너무 작으면 끝까지 스크롤해야 로드됩니다
isLoading 플래그 없이 구현하면 동시에 여러 요청이 발생할 수 있습니다
모바일에서 성능 저하를 고려해 한 번에 로드하는 아이템 수를 조정하는 게 좋습니다

이런 곳에 써요

SNS 피드 (뉴스피드, 댓글)
이미지 갤러리
상품 목록 (쇼핑몰)
검색 결과
채팅 메시지 히스토리

소스 코드

· 데모 페이지에서 자동 추출

'use client';

import { InfiniteScrollDemo } from './-components/InfiniteScrollDemo';

export default function InfiniteScrollPage() {
  return (
    <div className="bg-zinc-50 min-h-screen">
      <InfiniteScrollDemo />
    </div>
  );
}

69조회수

댓글