[React] Material UI 이용해서 페이지네이션 적용하기

페이지네이션? 무한 스크롤?

프로젝트를 진행하며 게시글 콘텐츠 수가 너무 많아질 경우를 대비해서 페이지네이션이나 무한스크롤을 적용해보기로 했다.

게시글 특성상, 하단에 글쓰기 버튼이 항상 있어야 하기 때문에 무한스크롤보다는 페이지네이션이 더 적합하겠다는 생각으로!..

페이지네이션을 구현해보기로 했다.

 

 

MUI의 Pagination 컴포넌트

MUI에서 페이지네이션 컴포넌트를 검색하면 다양한 스타일의 페이지네이션 컴포넌트를 확인할 수 있다.

https://mui.com/material-ui/react-pagination/#main-content

React Pagination component - Material UI

 

현재 프로젝트 UI는 굉장히 깔끔한 편이기 때문에 베이직한 컴포넌트를 적용하기로..

 

 

MUI에서 제공하는 페이지네이션에는 치명적인 단점이 하나 있는데, 페이지가 많을 경우 아래와 같이 페이지가 표시된다는 점이다.

🤔 페이지를 이런식으로 표시한다니? 좀 당황스러움..

 

이 때문에 MUI를 이용하지 않는 분들도 많은 것 같다. (검색해 보기에)
그래도 우리 프로젝트의 경우 MUI의 컴포넌트들을 부분 부분 이용하고 있고, 10페이지가 넘어갈 정도의 아주 많은 데이터가 쌓일 것 같진 않기에.. 일단 적용해 보기로!

 

 

 

페이지 알고리즘

페이징처리를 하려면 필요한 것들이 몇 가지 있다.

• 한 페이지에 몇 개의 게시글을 보여줄 것인지?
• 마지막 페이지는 몇 페이지인지

 

나의 경우에는 한 페이지에 5개의 게시글을 보여주기로 했다.
그럼 총페이지의 수 같은 경우는 아래와 같이 계산해볼 수 있다.

 const LAST_PAGE = board.length % 5 === 0 ? parseInt(board.length / 5) : parseInt(board.length / 5) + 1;

한 페이지에 들어갈 수인 5로 나누었을 때 딱 떨어진다면 그 수가 마지막 페이지가 될 것이고,
그렇지 않다면 다음페이지로 넘어가니 1을 더해주는 식이다.

 

 

다음으로 이제 각각 페이지에 들어갈 데이터를 잘라서 가져와야 한다.

  // 게시글 리스트 렌더링 핸들러
  const handleBoardList = () => {
    ...
      return board
        .slice(5 * (currentPage - 1), 5 * (currentPage - 1) + 5)
        .map((item) => <BoardItem key={item.id} item={item} />);
    }
  };

나의 경우에는 전체 데이터에서 현재 페이지에 따라서 slice 한 데이터들을 가져와서 뿌려주도록 했다.

저 식을 각각의 페이지에 적용해보면 이렇다.

// 1페이지일 경우
5 * 0, 5 * 0 + 5 => 인덱스 0부터 5까지
// 2페이지일 경우
5 * 1, 5 * 1 + 5 => 인덱스 5부터 10까지
...

 

 

 

MUI Pagination 컴포넌트 적용하기

적용한 컴포넌트는 아래와 같다.

<PaginationWrap>
   {currentLocation && (
        <Pagination page={currentPage} count={LAST_PAGE} defaultPage={1} onChange={handlePageChange}/>)}
</PaginationWrap>

Pagination 컴포넌트에는 여러 속성들이 있다.

• page : 현재 페이지가 active
• count : 마지막 페이지
• defaultPage : 디폴트 페이지 값
• onChange : 페이지 변경될 수 있도록 넣어주는 함수

 

onchange 핸들러에는 클릭한 값을 현재 페이지로 설정할 수 있는 로직을 넣어주었다.

const [currentPage, setCurrentPage] = useState(1);
...
const handlePageChange = (event) => {
    const currentPageIndex = Number(event.target.outerText);
    setCurrentPage(currentPageIndex);
  };

 

 

완성한 결과물은 아래와 같다!.. 데이터가 많이 들어가 있지 않지만 2페이지로 이동했을 경우 렌더링이 잘 된다. 

 

 

 

리액트로 페이지네이션은 처음 구현해보았는데 페이징 로직을 이해하기까지 시간이 좀 걸렸던 것 같다. 🤔
다음에 페이징 처리가 필요할 때도 요긴하게 쓸 수 있길 바라며!..