pagination - next

기존에 만들었던 페이지는

1~10까지만 나오고

new Array(10).fill(1).map((_,index) => (
  <span key={index + 1} id={String(index + 1)} onClick={onClickPage}>{index + 1}</span>
))

하드코딩으로 되어있다
11 이상의 페이지를 하려면 Array값을 하드코딩으로 늘려줘야한다.
그래서 이번엔 좌 우에 이전 페이지, 다음 페이지 버튼을 만들어서 11~20, 21~30 이런식으로 넘어가도록 만들어 보자

<span onClick={onclickPrevPage}>이전 페이지</span>
{
	new Array(10).fill(1).map((_,index) => (
  		<span key={index + 1} id={String(index + 1)} onClick={onClickPage}>{index + 1}</span>
	))
}
<span onClick={onclickNextPage}>다음 페이지</span>

좌 우에 이전 다음 페이지 버튼을 만들고 onClick으로 기능을 넣어주자

const [startPage, setStartPage] = useState(1);

현재 페이지의 첫값을 저장해주는 startPage를 만들어주고

const onclickPrevPage = ():void => {
  setStartPage(startPage - 10)
  void refetch({page: startPage - 10})
}

const onclickNextPage = () :void => {
  setStartPage(startPage + 10)
  void refetch({page: startPage + 10})
}

이전,다음버튼을 누르면
현재 페이지목록 첫페이지 값을 10씩 빼고 더하는 기능을 만들어준다

그리고 현재 목록에 적용시키기 위해

<span onClick={onclickPrevPage}>이전 페이지</span>
{
  new Array(10).fill(1).map((_,index) => (
    <span key={index + startPage} id={String(index + startPage)} onClick={onClickPage}>{index + startPage}</span>
))
}
  <span onClick={onclickNextPage}>다음 페이지</span>

Array로 만들어주는 값에도 넣어주면

이런식으로 만들 수 있다

현재 문제점
이전, 다음 페이지의 한계가 없음

게시글 유무에 상관없이 계속 넘어감