[ project3 / Pagenation ] 공지사항 페이지 이동2(Feat. Nextjs Tutorial)

페이지네이션의 버튼은 NextJS, toturial에서 있는 내용을 가져왔다.(시간이 좀 있었다면 toturial을 찬찬히 보고 싶다는 생각이 들었다.!)

 

<위 : next totorial> <아래 :내가 만든 것>

 

 

Pagination Component

next js :toturial

 

Supabase에서 받아온 정보를 prop(totalPages) 내려 받아서 페이지를 뿌려준다.

- currentPage는 URL에 들어간 page 정보를 확인해 데이터를 출력

- creatPageURL이 여기서 페이지 정보값을 URL에 넣는다.

URL get =>  searchParams.get('page')
URL set = > new URLSearchParams(searchParams).set('page', pageNumber.tostring())

 

 

allPages = generatePagination(currentPage, totalPages)

전체 페이지 개수를 파악후 어떻게 나열할 것인지를 알 수 있는 페이지

next js toturial

전체 길이를 7로 나눠서 계산을 진행한다. 그 결과 아래 아래처엄 페이지 개수를 정렬한다.

currentPage : pagination에 출력될 숫자를 배열로 만들어 반환한다.

조건1 : 현재 페이지가 처음 3개에 있을 때,
조건2 : 현재 페이지가 마지막 3개에 있을 때,
조건3 : !(조건 1 + 조건 2 ) : 조건1과 조건2가 둘 다 아닐 때,

 

Allpage.map

전달 받은 배열을 바탕으로 map을 돌려 pagination의 뼈대를 만든다.

여기서 인상적이 였던 부분은 position이다. position을 텍스트로 만든다. 그것 PaginationNumber component로 전달하고 그 바탕으로 가지고 CSS 모양을 꾸민다.

 

 

PaginationNumbers component

<왼 : next toturial>, <오른 : 내것 >

 

결론

pagination은 진짜로 어려운거 같다. 아직 내 실력에서는.

잘 만들어진 code는 본다는 것은 좋은 거 같다. 가독성도 좋고 나도 이해하기 수월했다.

하나의 component를 가지고 props을 통해서 다양한 변화가 될 수 있다는 것을 다시 상기시켰다.

 

참조
https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

Learn Next.js: Adding Search and Pagination | Next.js