[React] react-paginate with styledComponent

서론

React로 회사 업무 사이트 Pagination 다른 프로젝트에서 직접 구현을 해봤는데, 뭔가 좀 더 간단한 라이브러리가 없을까 하여 구글링 도중에 react-paginate를 찾았다. 실제로 구현하는 것도 도움이 많이 되지만, 시간상 직접 구현하면 시간도 걸려서 라이브러리 도움을 받기로 했다. (사실 귀찮음이 컸음)
이 후 적용을 해보니 어렵지도 않고 매우 간단하였고, 독스 설명도 잘 있어서 매우 편리했다.

 

사용 방법

밑의 URL npm 에서 구글 독스로 봐도 되고, 아니면 해당 글을 참고하여 사용해도 좋을 것 같다.

https://www.npmjs.com/package/react-paginate

react-paginate

 

리액트는 18.12.0 버전을 사용하였고, node 버전은 v14.17.0을 사용하였다. 

 

설치 방법

npm install react-paginate --save

설치 방법은 매우 간단하다. npm 사용하여 위의 명령어를 입력해주면 설치가 된다.

 

styled 컴포넌트와 같이 사용하기

나는 styled컴포넌트와 같이 사용하였는데, styled 컴포넌트와 어떻게 적용할지 고민을 하였는데, 매우 간단하였다. https://stackoverflow.com/questions/75532879/how-to-style-react-paginate-with-styled-components 

How to style React-paginate with Styled Components

위의 stackoverflow를 참고하여 작성하였다. 

 

실제 예시

 

styled.ts

import styled from "styled-components";
import ReactPaginate from "react-paginate";

export const StyledPagenate = styled(ReactPaginate)`
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  font-weight: 400;

  .page-number {
    width: 30px;
    height: 40px;
    border: 1px solid gray;
    margin-left: 6px;
    margin-right: 6px;
    cursor: pointer;
  }

  .previous {
    width: 100px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
  }

  .next {
    width: 70px;
    height: 40px;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    font-weight: 600;
  }

  a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    background-color: #ffb372;
  }
`;

 

styled styled 컴포넌트와 react-paginate를 import를 해준 후에, styled(ReactPaginate)를 해주면 된다. 이 후 컴포넌트에서 다음과 같이 적용한다.

 

component.tsx

export default function Component({ data }: IProps) {
  const [currentPageIndex, setCurrentPageIndex] = useState(1);
  const [itemOffset, setItemOffset] = useState(0);

  const itemCountPerOnePage = 12; // 페이지당 보여줄 아이템 갯수
  const dataCount = data!.length; // 

  const totalPageCount = Math.ceil(dataCount / itemCountPerOnePage);
  const endOffset = itemOffset + itemCountPerOnePage;
  const currentItems = hadoopList!.slice(itemOffset, endOffset);

  const handlePageClick = (event: PageChangeEvent) => {
    const newOffset = (event.selected * itemCountPerOnePage) % dataCount;
    setItemOffset(newOffset);
  };

  return (
    <>
        {data &&
          data!
            .slice((currentPageIndex - 1) * 12, currentPageIndex * 12)
            .map((item) => <DataItem item={item} key={data._id} />)}
        <S.StyledPagenate
          breakLabel="..."
          nextLabel="Next >"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          pageCount={totalPageCount}
          previousLabel="< Previous"
          renderOnZeroPageCount={null}
          pageClassName="page-number"
          previousClassName="previous"
          nextClassName="next"
          activeClassName="active"
        />
    </>
  );
}

page 숫자, previous, break, next 버튼을 커스터 마이징 하고싶다면, 위의처럼 className을 지정해주고, styled 컴포넌트에서 원하는 값으로 적용해주면 된다.

 

결론

밑에는 실제로 적용된 모습이고, data는 보여주고싶지만.. 회사 프로젝트였어가지고 따로 data들에 대한 항목들은 생략하였다.