TIL 039 | offset을 이용한 페이지네이션

JU CHEOLJIN·2021년 9월 5일
2

React

목록 보기
8/15
post-thumbnail

페이지네이션

백엔드에서 보통 가지고 있는 데이터의 경우에는 그 양이 많은 경우가 대부분이다. 이런 데이터를 전부 가져와서 보여준다면 시간이 오래 걸리게 된다. 그렇기 때문에 한 번에 받을 데이터를 설정하여야 하는데, 이때 필요한 것이 바로 Pagination 이다.

limit & offset

백엔드 입장에서는 보통 프론트엔드로부터 보내진 limit 을 통해서 몇 개의 데이터를 보내줄지 결정하게 되는데 이때 offset 에 대한 정보를 추가로 보내서 보내줄 데이터의 시작 지점을 결정할 수 있다.

만약 offset 이 0이고 limit 이 10이라면 백엔드에서는 인덱스가 0부터 9인 상품을 보내게 될 것 이다. 이때 다음 상품을 받기 위해서 프론트엔드에서는 offset을 새롭게 수정하여 보내줘야 한다.

offset 구하기

offset 을 구하는 방법이야 다양하게 있겠지만 간단한 방법을 하나 제시하고자 한다. 그것은 바로 현재 보여주고 있는 페이지의 숫자와 한 페이지에서 보여주는 상품의 갯수를 이용하는 방법이다.

즉, offset = (page-1) * limit 이다. 만약 2페이지를 볼 예정이고 10개의 상품을 보여줄 예정이라면 전달해 줄 offset 은 10이 될 것 이다. 이 요청에 따라 백엔드에서는 10번 인덱스부터 19번 인덱스까지 10개의 상품을 보낼 것이다.

여기서 제시한 페이지네이션이 정답은 아니다. 통신 환경에 따라서 여러 가지 방법이 있기 때문에 상황에 맞는 방법을 택해서 사용하면 된다. 페이지네이션의 경우에 자주 사용되기 때문에 대략적인 흐름을 이해하는 것이 좋다고 생각한다.

profile
사회에 도움이 되는 것은 꿈, 바로 옆의 도움이 되는 것은 평생 목표인 개발자.

0개의 댓글