[react]Pagination

Kyungoh Kang·2020년 12월 22일
0

wecode15

목록 보기
17/20

Pagination

쇼핑몰 같은 사이트를 들어가보면 상품이 많아 한페이지에 보여주기 어려울 때 밑에 숫자를 클릭해서 상품 리스트의 다음 페이지로 넘어가 본 경험이 누구나 있을 것이다. 평소에는 아무 생각 없이 숫자를 누르고 넘어갔지만 만드는 입장에서는 이것도 공부를 해야한다.

위와 같이 한페이지에 정보를 다 보여주기 어려울 때 여러 페이지에 걸쳐 정해진 양의 데이터만 받와와서 보여줄 수 있게 해주는것이 pagination이다.

query string

pagination을 하는 과정에서 쿼리 스트링을 사용하게 되는데 쿼리스트링이란 해당 엔드포인트에 대해 쿼리를 보내는 요청이라고 한다.

  • limit: 페이지에 보여줄 데이터의 수
  • offset: 보여줄 데이터가 시작하는 인덱스(위치)
  • ? : 시작
  • & : 여러개의 파라미터를 이어줌

ex| localhost:8000/product?limit=10&offset=5 => 페이지에 10개의 요소를 5번부터 출력

offset = {limit * idx) idx=페이지 넘버, 이렇게 하면 페이지마다 일정한 수의 데이터를 보여줄 수 있다.

query parameter

url query parameter가 필요할 때 window.location.search를 하면 가져올 수 있다.

0개의 댓글