React rc-pagination

rc-pagination은 리액트에서 페이지네이션을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

yarn add rc-pagination

import Pagination from "rc-pagination";
import 'rc-pagination/assets/index.css';

기본 구성

rc-pagination을 사용하여 페이지네이션 컴포넌트를 만들기 위해 필요한 기본 속성은 current, total, pageSize입니다.

current: 현재 활성화된 페이지 번호입니다.

total: 전체 데이터 수입니다. 이 값을 통해 총 페이지 수가 계산됩니다.

pageSize: 한 페이지에 보여질 데이터의 수입니다.

다음은 rc-pagination 컴포넌트를 사용한 기본 예제입니다.

<Pagination
  current={currentPage}
  total={totalCount}
  pageSize={pageSize}
  onChange={(page) => setCurrentPage(page)}
/>

페이지네이션 상태 관리
리액트 훅을 사용하여 currentPage, totalCount, pageSize 상태를 관리합니다. 초기값은 각각 1, 총 데이터 수, 페이지 당 데이터 수로 설정합니다.

const [currentPage, setCurrentPage] = useState(1);
const [totalCount, setTotalCount] = useState(7);
const [pageSize, setPageSize] = useState(3);

서버로부터 데이터 가져오기

useEffect 훅을 사용하여 currentPage가 변경될 때마다 새로운 데이터를 서버로부터 가져옵니다. 가져온 데이터를 통해 UI를 업데이트하고, totalCount를 설정하여 전체 페이지 수를 조정할 수 있습니다.

useEffect(() => {
  let startIndex = (currentPage - 1) * pageSize + 1;
  let endIndex = currentPage * pageSize;

  axios({
    method: 'get',
    url:`http://localhost:8000/carts/${userInfo.id}/${startIndex}/${endIndex}`
  })
    .then(res => {
      setCartList(res.data); // 데이터 업데이트
      setTotalCount(res.data[0].cnt); // 전체 데이터 수 업데이트
    })
    .catch((err) => console.log(err));
}, [currentPage]);