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