React 무한 스크롤(Infinite Scroll)

프로젝트를 구현하면서 많은 데이터 카드뷰들이 전달될 때 무한 스크롤이라는 기능을 사용해보기로 했다.

개인적으로 페이지네이션으로 넘어가는 방식은 답답하다고 생각이 들었고, 사용자편의성에서 스크롤 하기만 하면, 쌓여있는 정보들이 노출되는 것이 좋은 방식이라고 생각해서 무한 스크롤을 선택하게 되었다.

이 문서는 해당 작업을 하면서 겪었던 문제들, 사용하는 방법들에 대한 정리를 진행한 문서이다.

무한 스크롤이란,

1. 사용자가 특정 페이지 하단에 도달했을 때, API가 호출되며 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식

2. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션(Pagination)과 달리, 한 페이지에서 스크롤만으로 새로운 콘텐츠를 보여주게 되므로, 많은 양의 콘텐츠를 스크롤하여 볼 수 있는 장점

무한 스크롤 구현 방법

1. scroll event활용

• 스크롤이 페이지 끝에 닿는 것을 감지하여 추가 데이터를 받아오는 방식
  스크롤한 길이 + 현재 보이는 공간 >= 전체페이지 높이 면 추가 데이터 생성
• 해당 방식은 scroll 이벤트가 발생할 때 마다 => 성능저하 가능성 존재
• 성능 개선을 위해서는 throttle 적용하면 된다고 알려져있음

2. InterSection Observer API

• 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내 변화를 비동기적으로 관찰하는 방법

3. 라이브러리 사용

• react-intersecion-observer
• react-window
• react-virtualized