리엑트 페이지네이션 라이브러리(react+ SpringBoot)

리엑트로 위와 같은 페이지네이션을 구현했습니다. 이때 사용한 라이브러리와 코드를 공유하려고 합니다.

우선 라이브러리이기에 프로젝트에 해당 라이브러리를 먼저 설치해야합니다.

npm i react-js-pagination

 

라이브리러의 자세한 정보는 https://mui.com/material-ui/react-pagination/ 에서 확인하면 됩니다!

 

이후 사용하고자 하는 페이지에서 import 합니다.

import Pagination from "react-js-pagination";

Pagination 이 컴퍼넌트 이기에 소문자로 import하면 제대로 작동하지 않습니다.

 

 <Pagination
		// 내가 선언한 상태 : page, totalCnt    함수 : handlePageChange
        activePage={page} 
        itemsCountPerPage={10}
        totalItemsCount={totalCnt}
        pageRangeDisplayed={5}
        prevPageText={"이전"}
        nextPageText={"다음"}
        onChange={handlePageChange}
      />

태그에 대한 자세한 설명은 https://mui.com/material-ui/api/pagination/ 에서 확인하시면 됩니다.

제가 사용한 것은 

 

activePage : 현재 페이지

itemsCountPerPage : 한 페이지에 보여줄 글 수

totleItemsCount = 총 게시글 수

pageRangeDisplayed = 한 번에 보여줄 page 버튼 수 (저는 게시글이 적어서 2개만 나왔습니다)

?? +PageText : 다음 혹인 이전 버튼에 들어갈 글자

onChange : page가 선택됐을 때 실행할 함수 

 

 위치는 본인 프로젝트에 맞게 넣으면 됩니다.  저는 글 쓰기 버튼 위 게시판 아래에 배치하였습니다.

 

// 페이징
  const [page, setPage] = useState(1);
  const [totalCnt, setTotalCnt] = useState(0);

useState를 통해서 현재 페이지와, 총 글 수를 변수 선언했고

const getBbslist = (c, s, pn) => {
    axios
      .get("http://localhost:3000/bbslist", { params: { choice: c, search: s, pageNumber: pn } })
      .then((resp) => {
        console.log(resp.data);
        setBbslist(resp.data.bbslist);
        setTotalCnt(resp.data.cnt); // 글의 총수
      })
      .catch((err) => {
        alert(err);
      });
  };

게시글을 불러오는 함수를 통해서 게시글 데이터를 get요청했습니다.

이때 resp로 bbslist(게시글 리스트) 와 cnt(총 게시글 수) 를 리턴 받습니다.
controller에서는 서비스에 있는 bbslist 함수를 통해서 게시글들을 반환하고, getallbbs 함수를 통해서 총 게시글 수를 반환합니다.

@GetMapping("bbslist")
	public Map<String,Object> bbslist(BbsParam param){
		System.out.println("BbsController bbslist " + new Date());
		//글목록
		List<BbsDto> list = service.bbslist(param);
		
		//글의 총수
		int count = service.getallbbs(param);

		// 현재 페이지
		Map<String,Object> map = new HashMap<String,Object>();
		map.put("bbslist", list);

		
		//react용
		map.put("cnt", count);
		return map;
	}