페이지 양 옆에 이전페이지와 다음페이지 추가하기
<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
'Frontend 프론트엔드' 카테고리의 다른 글
[ 41 ] 페이지네이션 - State Lifting 리팩토링 (0) | 2024.07.02 |
---|---|
[ 40 ] 페이지네이션 - 첫째페이지 , 마지막 페이지 리팩토링 (0) | 2024.07.02 |
[ 38 ] 페이지네이션-1 (0) | 2024.06.29 |
[ 37 ] 글로벌 스타일과 폰트 (0) | 2024.06.28 |
[ 36 ] 컴포넌트 합성 (0) | 2024.06.27 |