Pagination

천문성·2023년 2월 26일
0

Pagination에 대해 기초적인 정리

현재페이지 와 보여줄리스트개수에 대한 state가 필요

현재 페이지에 해당하는 데이터들을 가져오려면

마지막데이터index = 현재페이지 * 한 페이지당 보여줄 개수
첫번째데이터index = 마지막데이터index - 한 페이지당 보여줄 개수
페이지에 보여줄 데이터 = 전체데이터.slice(첫번째index, 마지막index)

위의 코드를 변형하여 순서가 반대로 된 데이터도 pagination가능!

페이지번호 클릭 함수

페이지 번호 클릭 함수를 만들어 set현재페이지를 통해 현재페이지state를 변경해줘야 함

페이지 번호 목록

빈 배열을 만들고 페이지번호들을 push

const pageNums = [];
for( let i = 1; i <= math.ceil(전체데이터길이 / 보여줄 개수); i++){
  pageNums.push(i)
}

페이지번호에 map을 사용해서 페이지 번호들을 출력하면 끝

profile
프론트엔드 공부

0개의 댓글