TIL43.Pagination

아이템이 많은 쇼핑몰의 경우 전체상품을 한꺼번에 보여줄 수 없다. 이때 일정단위로 끊어서 아이템을 보여주는 기능인 pagenation에 대해 알아보자.

Pagination(paging)

백엔드에서 보내는 데이터양이 많다면, 그 데이터를 한 화면에 전부 보여줄 수 없을 것이다. 모든 데이터를 한번에 보여줄 수 없다면 한 페이지당 일정 길이의 데이터만 보여주는데 이 기능을 pagination이라고 한다.

프론트엔드에서 현재의 위치(Offset), 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달하고, 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현이 이루어진다.
하단에 1~10페이지수가 적혀있는 형식뿐만아니라 인스타처럼 하단의 스크롤이 내려왔을 때 새로운 데이터를 가지고 오는것도 페이지네이션이다.

Query String

페이지네이션 과정에서 백엔드 엔드포인트에 대해 질의문을 보내는 요청을 하는데, 이때 'query string'을 사용한다.
예를들어, "localhost:3000/product?limit=10&offset=5"를 풀어쓰면 "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"는 뜻이다.

const LIMIT = 6;
 
 componentDidMount() {
    fetch(`http://localhost:3000/Data/CategoryList.json?limit=${LIMIT}&offset=${nextOffset}`)
      .then((res) => res.json())
      .then((res) => this.setState({ menuList: res }));
  }

무한스크롤 VS 페이지네이션

무한 스크롤과 페이지네이션은 많은 양의 데이터를 보여줄 때 사용된다. 어떤 것이 더 좋다기보다는 목적, 상황에 따라 적절한 인터페이스를 사용하면 된다.

무한스크롤

사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 방식이다. 페이스북, 핀터레스트, 인스타그램 등 사용자가 콘텐츠를 직접 생성하는 사이트에 적합하다.
+사용자 참여 및 콘텐츠 탐색이 쉽다.
+모바일에 적합하다.
-페이지 성능이 늦어진다.
-스크롤 막대가 실제 데이터의 양을 반영하지 못한다.

페이지네이션

사용자가 가야할 방향이 뚜렷한 목표지향적인 사이트와 앱에 적합하다.
+사용자의 의도에 맞게 페이지를 찾을 수 있다.
+특정 항목의 위치를 파악할 수 있다.
-한페이지에 매우 제한된 내용만을 보여준다.