출처. https://www.indiehackers.com/post/ux-infinite-scrolling-vs-pagination-summary-4893f937de
<aside> 💡 표시할 컨텐츠들이 많아지게되면 페이지네이션과 인피니트 스크롤 두가지중 어떤 방식이 좋은지 고민하는 경우가 많다. 둘의 대한 장단점과 사이트의 성격에 따라 페이지네이션, 인피니트 스크롤을 사용해야 하는지 알아보며 우리 프로젝트에는 어떤 방식을 적용하여 진행할지 알아보자.
</aside>
사용자가 페이지를 스크롤할 때마다 자동으로 추가 데이터를 불러오는 방법이며, 보통 "무한 스크롤" 또는 "인피니트 스크롤"이라고 부른다. 이 방식은 사용자가 페이지 하단에 도달할 때마다 새로운 콘텐츠를 자동으로 로드하여 끊임없이 스크롤할 수 있도록 하여 사용자 경험을 향상시킨다.
특히 간단한 콘텐츠의 내용을 확인할 수 있는 이미지나 Facebook, Instagram, Twitter와 같은 소셜미디어에서 많이 사용된다.
사용자가 전체 데이터 세트를 여러 페이지로 나누어 볼 수 있게 하는 방법으로, 보통 "페이지네이션"이라고 부른다. 각 페이지 번호를 클릭하거나 다음, 이전 버튼을 통해 페이지를 이동할 수 있으며, 이 방식은 사용자가 명시적으로 페이지를 선택하여 데이터를 탐색하도록 할 수 있다.
게시물당 보여주는 컨텐츠 내용이 많을 수록 무한스크롤 보다는 페이지네이션을 많이 사용하며 검색엔진 결과인 Google이나 상품 목록을 나타내는 이커머스 사이트에서 많이 사용된다.
React Infinite Scroll 혹은 React Pagination을 검색하면 많은 구현 방법을 찾아볼 수 있는데 한번에 컨텐츠 데이터를 불러와서 분할하여 보여주는 방식과 페이지별 데이터를 불러오는 방식 두가지의 경우를 찾아볼 수 있었다.
한 번에 모든 데이터를 불러오기 (Client-Side Pagination)
모든 데이터를 서버에서 한 번에 불러온 후, 프론트엔드에서 페이지를 나누어서 구현하는 방법
장점: 프론트엔드에서 데이터가 이미 로드되어 있으므로 페이지 간 전환이 빠르다.
단점: 많은 양의 데이터일 경우, 초기 로딩 시간이 길어질 수 있으며, 메모리 사용량이 증가한다.
필요한 데이터만 서버에서 불러오기 (Server-Side Pagination)
사용자가 특정 페이지를 요청할 때마다 해당 페이지에 필요한 데이터만 서버에서 불러오는 방법
장점: 초기 로딩 시간이 짧으며, 메모리 사용량이 적어 대규모 데이터 셋에도 효율적이다.
단점: 페이지 간 전환 시마다 서버 요청이 발생되며, 네트워크 지연이 생길 수 있다.
프로젝트의 상황에 맞춰 적절한 방식을 사용할 수 있으며 우리는 이커머스 특성상 많은 데이터를 보관하고 있다는 판단하에 페이지별 분할된 데이터를 받아오는 형식을 선택하게 되었다.
<aside> 📍 페이지별 데이터 요청을 어떤식으로 할 수 있을까?
우리팀은 현재 페이지네이션과 무한스크롤 모두 적용해야 하는데, 서버데이터 상태 관리인 React Query를 사용하고 있기 때문에 이를 활용해서 구현하기로 결정했다.