mui(material ui)를 이용한 페이지네이션을 설명한 블로그를 발견하지 못해서
mui를 이용하지 않고 페이지네이션을 구현한 블로그를 참고해서 직접 만들어보았다.
mui를 이용하면 이렇게 생긴 페이지네이션 화면이 나타난다.
여기서 filterItem은 전체 데이터를 의미하고, 데이터를 첫 인덱스~마지막 인덱스까지 잘라서 보여주기 위해서 slice를 이용해주었다.
MyPagination 부분이 mui페이지네이션 부분인데 page는 현재 선택된 페이지를, count는 전체 페이지 수를 의미한다.
즉 전체 페이지수가 3이면 count={3}이다.
하지만 데이터가 늘어나면 페이지수가 늘어날 것이기 때문에
const count = Math.ceil(filterItem.length / postsPerPage)
전체 데이터 길이에서 페이지 당 항목을 개수를 나눠서 올림을 해줘서 페이지 수가 몇개가 나오는지 계산해주고 이를 넣어주었다.
내가 클릭한 번호를 selectedPage로 놓고 숫자를 클릭할 시에는 selectedPage로 현재페이지를 바꿔준다.
isNaN(selectedPage) 선택한 것이 숫자가 아닐때, 즉 < (이전페이지) 또는 > (다음페이지)를 눌렀을 때는 각각의 현재페이지를 1씩 감소하거나 증가시켜줬다.
< 또는 > 버튼을 눌러봤을 때 둘을 구분하는 attribute 가 data-testid 였고 다음 버튼은 data-testid 가 NavigateNextIcon 이었다. (e.target 콘솔 찍어서 확인해봄!)
