---
id: pattern-infinite-scroll
title: "Infinite Scroll Pattern"
category: "Pattern_Web"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["infinite scroll", "무한 스크롤", "pagination", "cursor pagination", "virtualization"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.85
created_at: 2026-06-13
updated_at: 2026-06-13
review_reason: ""
merge_history: []
tags: ["pattern", "web", "frontend", "pagination", "platform-independent"]
raw_sources: ["일반 프런트엔드 공학 지식"]
applied_in: []
github_commit: ""
---

# [[Infinite Scroll Pattern]]

## 🎯 한 줄 통찰 (One-line insight)
무한 스크롤은 "사용자가 끝에 도달하면 다음 페이지를 자동 로드" 하는 패턴으로, *커서 기반 페이징 + DOM 가상화 + 중복/경쟁 요청 방지* 가 없으면 성능과 정확성이 무너진다.

## 🧠 핵심 개념 (Core concepts)
1. **트리거:** IntersectionObserver 로 sentinel 가시화 감지.
2. **커서 페이징:** offset 대신 cursor(마지막 항목 키) — 삽입/삭제에 안정.
3. **가상화:** 화면 밖 항목은 DOM 에서 제거(react-window 등).
4. **중복/경쟁 방지:** 진행 중 로드 잠금, 이전 요청 취소.
5. **상태:** 로딩/끝(hasMore)/에러 표시.

## 📖 세부 내용 (Details · 패턴 명세)
- **Problem (언제 쓰나):** 큰 목록(피드/검색결과)을 점진 로드해 초기 부하를 줄일 때.
- **사용 조건:** 페이징 API(가급적 커서); 항목 높이 처리.
- **장점:** 빠른 초기 로드, 자연스러운 UX, 대용량 처리.
- **단점:** 푸터 도달 불가, 딥링크/뒤로가기 어려움, 접근성/SEO 약함, 구현 복잡.
- **대안:** 일반 페이지네이션(점프/SEO 좋음), "더 보기" 버튼(제어 명확).
- **실패 사례:** offset 페이징 중 삽입→항목 중복/누락; 가상화 없이 DOM 폭증 렉; 중복 트리거로 같은 페이지 N번; 경쟁 요청 순서 꼬임; hasMore 미처리로 무한 호출.

## 💻 코드 패턴 (Code patterns)
```text
observer.observe(sentinel)
onIntersect: if (!loading && hasMore) { loading=true; signal=abortPrev()
  page = await api.list({ cursor, signal }); items.push(...page.items)
  cursor = page.nextCursor; hasMore = !!cursor; loading=false }
render: virtualize(items)   # 화면 밖 제거
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
무한 스크롤이 항상 옳지 않다 — 작업형 목록(테이블/검색)엔 페이지네이션이 제어·딥링크 면에서 낫다. 피드형에만 적합.

## 🛠️ 적용 사례 (Applied in summary)
일반 웹/모바일 피드. (ConnectAI 직접 사례 없음.)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[패턴 카탈로그 인덱스]]
- **관련 개념:** [[React State Pattern]], [[Async Concurrency Pattern]], [[Caching Pattern]], [[웹 개발 가이드]]
- **참조 맥락:** 작은 모델이 큰 목록 UI 를 구현할 때 참조.

## 📚 출처 (Sources)
- [S1] 일반 프런트엔드 페이징/가상화 지식

## 📝 변경 이력 (Change history)
- 2026-06-13: 프로젝트 독립 패턴 카드 작성.
