📖 무한 스크롤 (Infinite Scroll)
- 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠가 자동으로 로드되어 끊김 없이 이루어지는 것처럼 보이게 하는 UI 패턴이다.
- 사용자가 페이지 하단에 도달할 때마다 추가 데이터를 동적으로 불러와 현재 화면에 이어 붙이는 방식으로 작동한다.
- 이 방식은 기존의 페이지 네이션처럼 다음 페이지 버튼을 클릭하거나 페이지 번호를 직접 선택할 필요가 없다.
- 주로 콘텐츠 양이 많고 사용자가 연속적으로 탐색하는 서비스에서 많이 사용된다.
⚙️ 구현 원리
스크롤 위치 감지
- 사용자가 스크롤을 얼마나 내렸는지를 감지한다.
- 페이지 끝에 가까워졌는지를 확인하여 새로운 데이터를 불러올 시점을 판단한다.
기본 구현 방식 : Scroll 이벤트 리스너
- 가장 단순한 방법은
Scroll이벤트를 지속적으로 감지하는 것이다.- 하지만 스크롤 이벤트는 매우 자주 발생하므로 성능 저하를 유발할 수 있다.
- 그래서
debounce또는throttle기법을 적용해 이벤트 호출 횟수를 줄인다.
효율적인 대안 : Intersection Observer API
Intersection Observer는 특정 요소가 화면에 들어올 때 자동으로 감지할 수 있는 현대적인 API이다.- 이 방식은 성능이 뛰어나고 코드가 간결하다.
서버 데이터 요청
- 스크롤이 감지되면 클라이언트는 서버에 추가 데이터 요청을 보낸다.
- 이때 다음 데이터를 불러올 기준점을 함께 전달한다.
데이터 반환 및 화면 갱신
- 서버는 해당 기준점 이후의 일정 개수만큼 데이터를 반환하고 클라이언트는 이를 기존 리스트 하단에 추가 렌더링 하여 마치 콘텐츠가 끊임없이 이어지는 듯한 무한 스크롤 경험을 완성한다.
🧱 Flutter에서 무한 스크롤 구현
🔎 NotificationListener 사용
- Flutter에서는
NotificationListener<ScrollNotification>을 이용해 스크롤 이벤트를 감지할 수 있다.- 이 위젯은 하위 위젯에서 발생한 스크롤 관련 알림을 듣고
onNotification콜백에서 처리 로직을 실행한다.// 위젯 트리에서 발생하는 알림을 감지하는 위젯 NotificationListener( onNotification : (notification) { // 사용자가 스크롤을 멈췄을 때 발생하는 알림만 처리 if(notification is ScrollEndNotification) { // 스크롤 중일 때는 무시하고 스크롤이 끝났을 때만 체크 if(notification.metrics.pixels >= // 현재 스크롤 위치 notification.metrics.maxScrollExtent) { // 최대 스크롤 가능한 거리 }} return true;}
🧭 ScrollNotification 종류
ScrollStartNotification | 스크롤이 시작될 때 |
ScrollUpdateNotification | 스크롤이 이동중일 때 |
ScrollEndNotification | 스크롤이 멈췄을 때 발생 |
📊 metrics 속성 정리
속성명 설명 metrics.pixels현재 스크롤 위치 metrics.maxScrollExtent스크롤 가능한 최대 거리 metrics.minScrollExtent스크롤 가능한 최소 거리 metrics.extentAfter현재 위치 이후 남은 스크롤 거리 metrics.extentBefore현재 위치 이전의 스크롤 거리
🧠 버블링
- 하위 위젯에서 발생한 이벤트가 상위 위젯으로 전파되는 것을 의미한다.
onNotification의 반환 타입은bool이며false를 반환하면 이벤트가 상위로 전파되지 않고true를 반환하면 계속 전파된다.- 즉 하위 노드에서 이벤트를 처리하고 싶을 때는
false로 리턴하면 된다.
💡 정리
무한 스크롤은 스크롤 감지 → 하단 도달 → 데이터 요청 → 리스트 갱신의 흐름으로 작동하며 Flutter에서는
NotificationListener와ScrollNotification을 활용해 간단히 구현할 수 있다.
