페이지네이션

[Ji-eun1]

😎   결과

2022-08-31.8.36.34.mov

🔗 참고 링크

react-js-pagination ( 적용 )
jw-react-paginate

💭   내 생각

처음에는 jw-react-paginate 로 페이지네이션을 구현했었다.

jw-react-paginate 장점은 다음과 같다.

• router, controller를 만들 필요가 없다.
• 부트스트랩 사용할 필요가 없다.
• controller에서 paginate() 함수에 필요한 파라미터를 props로 전달해주기만 하면 페이지네이션이 자동으로 만들어진다.

하지만 typescript 와 연동이 되지않아서 할 수 없이 react-js-pagination 을 사용하였다.

🔑   작업과정

프론트

1. forumList.tsx

페이지네이션에 필요한 state

const [totalItemsCount, setTotalItemsCount] = useState(0); // 총 아이템의 개수
const [activePage, setActivePage] = useState(1);  // 현재 페이지
const [itemsCountPerPage] = useState(5); // 페이지당 아이템 개수

const [indexOfLastPost, setIndexOfLastPost] = useState(0); // 현 페이지의 첫번째 인덱스
const [indexOfFirstPost, setIndexOfFirstPost] = useState(0); // 현 페이지의 마지막 인덱스
const [pageOfForums, setPageOfForums] = useState<ForumType[]>([]); // 현 페이지의 게시물 리스트

유저가 페이지 넘버를 클릭하면, onChangePage 함수가 동작하여 activePage state 가 변한다.

// 페이지가 바뀔 때 핸들링해줄 함수 onChangePage
const onChangePage = (pageNumber: number) => {
    setActivePage(pageNumber);
};

activePage state 가 변하면 그에 따라,
indexOfLastPost, indexOfFirstPost 가 변하고,
현 게시물 list 에서 위 인덱스 범위만큼 잘라진 부분이 pageOfForums state 에 저장된다.

useEffect(() => {
    setTotalItemsCount(forums.length);
    setIndexOfLastPost(activePage * itemsCountPerPage);
    setIndexOfFirstPost(indexOfLastPost - itemsCountPerPage);
    setPageOfForums(forums.slice(indexOfFirstPost, indexOfLastPost));
}, [activePage, indexOfFirstPost, indexOfLastPost, forums, itemsCountPerPage]);

pageOfForums 를 맵핑하여 active page 게시물 리스트를 유저에게 보여준다.

{
    pageOfForums.map((forum, i) => {
        return ( ... )
}

페이지네이션 required props 전달

<Paging
    activePage={activePage}
    itemsCountPerPage={itemsCountPerPage}
    totalItemsCount={totalItemsCount}
    onChangePage={onChangePage}
/>

2. pagination.tsx 생성

required props 전달받아 pagination 컴포넌트를 따로 생성한다.

const Paging = ({ 
    activePage, 
    itemsCountPerPage,
    totalItemsCount,
    onChangePage
 }: PagingType): React.ReactElement => {

    return(
        <Pagination
            activePage={activePage}  // 현재 페이지
            itemsCountPerPage={itemsCountPerPage}  // 한 페이지당 보여줄 리스트 아이템의 개수
            totalItemsCount={totalItemsCount}  // 총 아이템의 개수
            pageRangeDisplayed={5}  // Paginator 내에서 보여줄 페이지의 범위
            prevPageText={'‹'}
            nextPageText={'›'}
            onChange={onChangePage}  // 페이지가 바뀔 때 핸들링해줄 함수
            linkClass="page-link"  
            innerClass="pagination justify-content-center"
            itemClass="page-item"
        />
    )
}