Frontend 프론트엔드
[ 39 ] 페이지네이션 - 이전페이지, 다음페이지
박민우_
2024. 7. 2. 11:59
페이지 양 옆에 이전페이지와 다음페이지 추가하기
<span onClick={onClickPrevPage}>이전페이지</span>
{new Array(10).fill(1).map((_, index) => {
return (
<span
key={index + startPage}
id={String(index + startPage)}
onClick={onClickPage}
style={{ margin: "5px" }}
>
{index + 1}
</span>
);
})}
<span onClick={onClickNextPage}>다음페이지</span>
이전 페이지 구현 함수
const [startPage, setStartPage] = useState(1);
const onClickPrevPage = (): void => {
setStartPage(startPage - 10);
refetch({ page: startPage - 10 });
};
다음 페이지 구현 함수
const onClickNextPage = (): void => {
setStartPage(startPage + 10);
refetch({ page: startPage + 10 });
};
개선사항
1 페이지에서 이전 페이지를 누르면 - 페이지로 이동한다.
무한정으로 다음 페이지를 누르면 게시글이 없어도 페이지가 이동한다.
728x90