[9.21(목) 북스탁 프로젝트] 실시간 인기도서 순위 보여주기 | MainRanking

 

첫 번째 페이지에서는 이전버튼이 비활성화!

 

 

 

const [currentPage, setCurrentPage] = useState(1);

 

currentPage는 현재 페이지번호를 저장하는 상태, 초기값을 1로 설정했다!

 

 

 

const getPageData = (data, itemsPerPage, page) => {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
};

 

getPageData 함수는

데이터 배열(data), 페이지당 표시할 아이템 개수(itemsPerPage), 그리고 현재 페이지 번호(page)를 매개변수로 받는다!

 

함수 내에서는

현재 페이지의 시작 인덱스(startIndex)와 끝 인덱스(endIndex)를 계산하고, slice 메서드로 해당 범위에 속하는 데이터를 반환한다!

 

 

const itemsPerPage = 6;

 

한페이지당 표시할 아이템 개수!

 

 

const currentData = getPageData(exampleData, itemsPerPage, currentPage);

 

currentData는 현재 페이지에 표시할 데이터를 저장한다!

getPageData 함수를 호출해서 currentData 변수에 할당한다!

 

 

const currentRanking = (currentPage - 1) * itemsPerPage;

 

currentRanking은 현재 페이지의 첫 번째 아이템의 순위를 나타낸다!

예를 들어, 첫 번째 페이지에는 1위부터 시작하고, 두 번째 페이지에는 7위부터 시작한다! 

 

 

const totalPages = Math.ceil(exampleData.length / itemsPerPage);

 

totalPages는 전체 페이지 수를 계산한다!

데이터 배열의 길이를 페이지당 아이템 개수로 나눈 값을 올림한다!

예를 들어, 7개의 아이템과 페이지당 6개의 아이템을 표시한다면 totalPages는 2가 된다!

반응형

 

const hasNextPage = currentPage < totalPages;
const hasPrevPage = currentPage > 1;

 

hasNextPage와 hasPrevPage는 다음 페이지와 이전 페이지로 이동할 수 있는지 여부를 나타낸다!

hasNextPage는 현재 페이지가 마지막 페이지가 아닌 경우 true로 설정되고,

hasPrevPage는 현재 페이지가 첫 번째 페이지가 아닌 경우 true로 설정된다!

 

 

const nextPage = () => {
    setCurrentPage((prev) => prev + 1);
};

const prevPage = () => {
    setCurrentPage((prev) => Math.max(prev - 1, 1));
};

 

nextPage 함수는 다음 페이지로 이동하기 위한 함수이다!

setCurrentPage 함수를 사용해서 현재 페이지 번호를 증가시킨다!

 

prevPage 함수는 이전 페이지로 이동하기 위한 함수이다!

setCurrentPage 함수를 사용해서 현재 페이지 번호를 감소시킨다!

 

페이지 번호가 1보다 작아지지 않도록 Math.max 함수를 사용해서 보정한다!

 

 

 

 

이렇게 두 번째 페이지(마지막 페이지)가 되면 이전 버튼이 활성화되고 다음버튼이 비활성화된다!