[React] 페이징 만들기

 

분명히 자주 쓸거같아서

보고 빠르게 만들기 위해 블로그에 남겨두겠다 !!

 

양쪽 화살표를 누르면 현재 페이지에서 각각 -1, +1이 되도록 만들었다.

아직, 내가 7페이지에서 11페이지를 가려면 10을 누르고 >를 눌러야한다는 단점이 있지만..

<< , >> 버튼은 차차 수정하도록...

 

// 전체 게시글 갯수
const cnt = 400;

// 현제 페이지 번호
const [currentpage, setCurrentpage] = useState(1);

// 마지막 페이지 번호
const finalPagenum =
  cnt % 12 > 0 ? Math.floor(cnt / 12) + 1 : Math.floor(cnt / 12);

// 페이징 만들기
let pageArray = [];
const paging = () => {
 // 현제 페이지에 따흔 pageArray[]의 번호. 1~10: 0, 11~20: 2, 21~30: 3을 출력
 const startToend_num = Math.floor((currentpage - 1) / 10);

 for (
   let i = startToend_num * 10 + 1;
   i <= (startToend_num + 1) * 10 && i <= finalPagenum;
   i++
 ) {
   pageArray.push(i);
 }
};

이것은 전체 코드

 

남들은 어떻게 구현하는지 모르겠으나

열심히 머리를 싸매본 결과

 

현재 페이지(currentPage) 기준으로

현재 페이지가 1~10 사이에 있다면 0,

현재 페이지가 11~10 사이에 있다면 1 ...

이렇게 출력하도록 되어있다.

 

그러니까, 내가 7페이지에 있다면

PageArra =[]가  [1,2,3,4,5,6,7,8,9,10]로 바뀌고

 

내가 18페이지에 있다면

PageArra가 [11,12,13,14,15,16,17,18,19,20]을 출력하도록 하고싶어서

 

currentPage기준으로 for 문을 만들었다 !

 

0 -> 1 ~10

1 -> 11 ~ 10

2 -> 21 ~ 30

...

startToend_num -> (startToend_num*10)+1 ~ (startToend_num+1)*10

이렇게 해결 ^^!

 

그런데 여기까지만 하면 전체 페이징 갯수는 34개인데, [31~40] 이 출력되므로

i가 마지막 페이지 넘버(ex. 34)를 넘어가면 중지하도록 조건을 걸면

 

아주아주 손쉽게 페이징 완료 ~~