• React-paginate 라이브러리를 사용하였다.

  • 설치

    $ npm install react-paginate
    

react-paginate

• 구현 모습

  

• 작동 로직

  • Pagination은 react-paginate 라이브러리의 ReactPaginate 컴포넌트를 통해서 이루어진다.

  • 작동하기 위해 필요한 인자

    • onPageChange 이벤트에 들어갈 handlePageClick 함수
    • 총 몇 페이지가 필요한지 알려주는 pageCount 변수
    • pageCount 를 계산하기 위해서 필요한 itemsPerPage(한 페이지당 표시할 아이템 개수), classCount(전체 아이템 개수)

  • 페이지네이션을 사용하는 컴포넌트에서 Pagination 컴포넌트에 props로 위의 인자를 넣어주면 Pagination 컴포넌트 내에서 필요 페이지 수 계산해서 페이지네이션 해준다. 보여줄 페이지가 1페이지 밖에 안된다면 페이지네이션 버튼을 안보여주도록 처리해주었다.

  • handlePageClick 함수

    • event.select 에서 페이지 버튼의 값을 가져오기 때문에 버튼을 누를때마다 (페이지 번호) * (한 페이지 당 보여줄 아이템 개수) % 총 아이템 개수 = 오프셋으로 설정해주어서 오프셋 다음의 아이템부터 가져오도록 한다.
    • ex) 레슨리스트를 가져올때

    // ClassList.tsx
    
    ...
    
    const [classCount, setClassCount] = useState(0);
      const itemsPerPage = 5;
    
      const handlePageClick = async (event: any) => {
        const newOffset = (event.selected * itemsPerPage) % classCount;
        try {
          const res = await LessonAPI.getLessons(itemsPerPage, newOffset);
        } catch (e) {
          console.log(e, '레슨을 불러오지 못했습니다.');
        }
      };
    
    ...
    
    <Pagination
            itemsPerPage={itemsPerPage}
            classCount={classCount}
            handlePageClick={e => handlePageClick(e)}
    />
    
    ...
    

  • 속성

    • pageCount - 총 아이템 개수
    • pageRangeDisplayed - 페이지 버튼 클릭시 보여지는 양 옆 페이지 버튼 개수
    • breakLabel - 페이지 수가 많을 경우 건너뛸 수 있는 버튼
    • previousLabel - 이전페이지로 가는 버튼의 value값
    • nextLabel - 다음페이지로 가는 버튼의 value값
    • onPageChange - 페이지 버튼을 눌렀을 때 일어나는 이벤트
    • containerClassName - css적용할 때 사용
    • activeClassName - 현재 페이지에 css처리해주기 위한 클래스명
    • previousClassName/NextClassName - 이전/다음버튼 css적용 위한 클래스명