Spring boot, React 페이지네이션

@GetMapping({"","/"}) //indexPage에 전체 게시물 목록을 넘겨줌
    public Page<Board> boardAllList(@PageableDefault(size = 2, sort = "id", direction = Sort.Direction.DESC) Pageable pageable) {
        return boardService.boardAllList(pageable);
    }

: 게시글 전체 리스트를 pageable해서 넘겨줌(jpa의 findByAll은 바로 pageable적용 가능)

그럼

console.log(res) : res ("http://localhost:8080/?page=" + page로받아온 데이터) 찍어서 f12로 확인해 보면 content :  {..., pageble{..., }, ..., total, firtst, last, ...} 등등 나와있음 이걸 참고로 useState, 와 useEffect를 사용해서 구현해봄

const Home = () => {
  const [page, setPage] = useState(0);

  const [disable1, setDisable1] = useState(false);
  const [disable2, setDisable2] = useState(false);

  const [boards, setBoards] = useState({
    content: [],
  });

  const previousPage = () => {
    setPage(page - 1);
  };

  const nextPage = () => {
    setPage(page + 1);
  };

  const firstPage = () => {
    setPage(page - page);
  };

  const lastPage = () => {
    setPage(boards.totalPages - 1);
  };

  useEffect(() => {
    fetch("http://localhost:8080/?page=" + page) //localhost:8080에게 Get방식(기본값으로 표기안해도 됨)으로 요청을 보내면 controller가 받아서 로직실행
      .then((res) => res.json()) //받아온 데이터를 json으로 감싸서
      .then((res) => {
        //setBoards에게 깊은 참조-> 렌더링
        setBoards(res);
        if (res.first) {
          setDisable1(true);
        } else {
          setDisable1(false);
        }
        if (res.last) {
          setDisable2(true);
        } else {
          setDisable2(false);
        }
      });
  }, [page]); //page가 변할 때마다 한번씩

  return (
    <div>
      <br />
      <>
        {boards.content.map((board) => {
          return <BoardItem key={board.id} board={board} />;
        })}
      </>
      <br />
      <Pagination className="justify-content-md-center">
        <Pagination.Item disabled={disable1} onClick={firstPage}>
          첫 페이지
        </Pagination.Item>
        <Pagination.Prev disabled={disable1} onClick={previousPage} />
        <Pagination.Item active>{page + 1}</Pagination.Item>

        <Pagination.Next disabled={disable2} onClick={nextPage} />
        <Pagination.Item disabled={disable2} onClick={lastPage}>
          마지막 페이지
        </Pagination.Item>
      </Pagination>
    </div>
  );
};

export default Home;