결과물
페이지네이션 결과물
셀렉터 드롭다운 창이 영상에는 안나오네요 :(
설명
마이페이지에서 제공하는 내용은 내정보, 내가 작성한 글이다.
작성한 글을 조회하여, 게시판 처럼 보이도록 작업했다.
컴포넌트 설명
이번에 게시판 형태의 pagination을 처음 작업 해봤다.
게시판 형태로 내가 작성한 글을 보여주기 위해, 아래와 같은 구조로 컴포넌트를 개발했다.
게시판 컴포넌트 레이아웃
노출 시킬 리스트의 갯수를 변경할 select와 노출될 리스트, 그리고 페이징 처리할 footer로 나누었다.
Select 태그
설명
한 페이지에 노출 될 리스트 갯수 limit를 select태그 onChange할 때 마다 상태를 변경했다. (기본 리스트 갯수 10)
게시글 영역
설명
select태그를 이용해 노출될 포스트리스트가 변경될 때 마다, limit상태가 변경됨으로, 상태값 변경에 따라 해당 값을 사용하는 곳은 리렌더링 된다.
따라서 리렌더링 될 때 마다 slice로 일정 구간을 자르고 자른 구간을 map함수를 이용해 리스트를 그렸다.
limit : 노출시킬 갯수 상태 관리
page : 포스트의 페이지 상태 관리
offset(중요) : 첫 포스트의 위치 상태 관리
1번째 페이지의 포스트 위치 = (1(페이지 넘버) - 1) 10(limit 상태값) = 0
2번째 페이지의 포스트 위치 = (2(페이지 넘버) - 1) 10(limit 상태값) = 10
로 생각하면 쉽다.
페이징 영역
설명
마지막 푸터영역(pagination)을 보자.
먼저 pagination을 작업하기위해 네가지 인자를 받았다.
total: 총 게시글의 갯수
limit: 한 페이지에 노출될 갯수
page: 현재 페이지
setPage: page상태를 갱신 시키기 위한 useState
추가로 PaginationNav컴포넌트의 내부에서 numPages 상수를 만들어 사용하는데,
전체 포스트 갯수를 노출시킬 갯수로 나눈 결과를 올림(ceil)하여 마지막 페이지가 정상적으로 노출 되도록 한다.
numPages를 Array.fill().map()함수들을 이용해 순회한다.
설명- numPages를 Array.fill().map()
Array()메소드를 이용해 numPages의 숫자 만큼 배열을 만든다.
이때, numPages = 5 라고 가정했을때 Array(numPages)는 모두 비어있다.
fill(0)함수로 빈곳을 모두 채워주면 배열의 갯수만큼(5) 반복할 수 있게 된다.
좌, 우 버튼은 클릭시 page 상태값 갱신을 위해 page에 -1 or +1했고,
page값이 1 or numPage일 경우 disabled처리했다.
마무리
pagination의 알고리즘이 복잡할 줄 알았는데, 생각보다 간단했다.
가시성이 더 좋은 페이징 기능을 구현하려면 더 공부해야겠지만, 지금 나에게 필요한 기능으로썬 만족스러운 결과였다.
myPage를 시작으로 지금까지 작업한 결과물의 회고(?)를 시작한다.
[side project] express까지 설명했는데, 다음 포스트는 client의 라우팅(React-router)부터 진행하겠다.
끝.
