Pagination, (query string)

eunsonny·2020년 11월 1일
0
post-thumbnail

Pagination이란?

  • 목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식을 말한다.
  • 꼭 게시판처럼 1~10 페이지가 있는 형식 뿐 아니라 인스타그램 처럼 가장 하단으로 스크롤이 내려왔을 때 새로운 데이터를 추가로 받아 오는 것도 Pagination이다.
  • Pagination을 구현하기 위해서는 해당 API에 대해 백엔드와 약속되어 있어야 한다.



Pagination 을 위해서는 Offset: 현재의 위치와, Limit: 한번에 (또는 추가로) 보여줄 컨텐츠의 수 라는 개념을 이용하여 백엔드에 전달한다. 그리면 백엔드에서는 그에 해당하는 데이터를 끊어서 보내주는 방식으로 구현하게 된다.

이번 프로젝트에서 pagination에 사용한 코드이다. 나는 한 페이지에 12개의 상품정보를 보여주기로 정했기 때문에 Limit은 12로 설정했으며, componentDidMount를 통해 제일 처음 보여줄 데이터의 값이므로 Offset은 제일 처음인 0으로 설정했다.


무한 스크롤 구현이 아니였기 때문에 Limit 값은 12로 계속 고정되어 있고, offset의 값만 변경해주면 되었다. 따라서 setQS 함수를 통해 가고자하는 페이지의 숫자를 인자로 받아 target Page로 갈 때 필요한 offset을 계산해 주었다.


참고로 내가 갖고있는 query string의 state값은 위와 같았다. pagination 외에 추가로 filtering에 관한 query string도 관리해야 했기 때문에 함께 객체로 묶어서 관리했다.

setQS 함수에서 새롭게 setState되는 offset의 값은 paging 함수에서 ?limit=12&offset=(NUM)의 형태로 변경되고 componentDidupdate에서 조건 값에 따라 paging 함수를 실행시키며, 백엔드에 내가 원하는 부분의 데이터를 요청할 수 있게 된다.

profile
코린이 🙆

0개의 댓글