Pagination컴포넌트 개발 질문드립니다...!

Question

안녕하세요. 리액트로 Pagination공통 컴포넌트 개발 중인데 보통 Pagination컴포넌트 만들 때, 아이템을 페이지에 따라 분할해서 렌더링하는 부분, 그러니까 한 페이지에 itemsPerPage 개수만큼의 아이템만 보여주는 기능도 같이 넣나요?팀원 한 분이 제가 만든 Pagination 컴포넌트를 사용하다가 itemsperpage에 10으로 입력해도 10개씩 보이는게 아니라 전체 데이터가 다 보인다고 하셨거든요... 아마 제가 개발한 Pagination컴포넌트는 UI랑 페이지 이동 로직만 담당하고 데이터의 분할 기능은 없어서일거예요.그래서 데이터 분할을 부모 컴포넌트에서 처리해야 하는지 아니면 Pagination자체에서 데이터 매개변수라던가 추가로 값을 받아서 컴포넌트 자체에서 처리하는 방향으로 수정하면 좋을지 어떻게 하면 좋을지 좀 조언을 얻고 싶습니다.

킁킁탐정 · Answer

특별한 이유가 없다면 보통은 다 분리합니다.https://mui.com/material-ui/react-pagination/https://nextui.org/docs/components/paginationhttps://ui.shadcn.com/docs/components/pagination

풍월상신(가니메디안) · Answer

부모 컴포넌트에서 Paginations 컴포넌트에게 currentPage, totalPagesCnt, onPageChange 를 넘겨주면 될 것 같습니다.itemsPerPage 는 상수로 처리하던지, 글로벌이면 되겠죠.Paginations 컴포넌트에서는 onPageChange(i) 만 트리거 해주면 되고, for (let i = startPage; i <= endPage; i++) { pageNumbers.push( ); }부모 컴포넌트에서 onPageChange 를 정의해주면 됩니다. const handlePageChange = (pageNumber: number) => { setSearchParams({ page: pageNumber.toString() }); }; ..... {/* Pagination */}

Pagination컴포넌트 개발 질문드립니다...!

2개의 답변

Q&A 목록