[React] pagination 하단바 로직구현

✅ Pagination 하단 바

댓글 컴포넌트를 구현하면서 가장 막막했던 부분이 요 페이지네이션 하단 바 로직 구현이었다.

고려해야하는 경우의 수가 많아서인데, 아래 로직의 경우에는
1) 한 페이지 당 5개의 댓글을 보여주고 댓글 증감에 따라 페이지 수가 달라져야 함 (만약 댓글이 5개라면 1페이지, 6개라면 2페이지로 증가)

2) 한번에 보여지는 페이지의 개수는 5개가 최대, 즉 1~5페이지까지는 댓글 수에 따라 순차적으로 페이지가 증가하는게 보이지만 6페이지 이상부터는 화살표를 눌러야 뒷 페이지를 확인할 있음

3) 특정 페이지를 눌렀을 때, 해당 페이지가 가운데 정렬 되어야 함. 예를들어 6페이지를 선택했다면 < 4 5 6 7 8 > 의 형태로 나열되어야 함
(추가로 선택된 페이지의 색도 구분)

4) 첫번째, 마지막 페이지에 도달하면 양 옆의 화살표가 사라져야 함

5) 마지막 2페이지 전부터는 특정 페이지를 선택하더라도 가운데정렬 불가. 예를들어 총 8페이지일 때 6,7,8 페이지를 선택하면 < 4 5 6 7 8 > 형태가 고정되어야 함

이러한 것들을 전부 고려해야 했기에 로직을 구현하는데 시간이 조금 걸렸다. 처음엔 막막했는데 초기 페이지 배열과 그 이후의 경우를 분리해서 생각하니 생각보다는(?) 간단한 코드가 나왔다.

const LIMIT = 5;

  const [paginationArray, setPaginationArray] = useState([]);
  const pageLen =
    commentsLen % LIMIT === 0
      ? commentsLen / LIMIT
      : parseInt(commentsLen / LIMIT) + 1;

  const getInitialPageArr = (pageLen) => {
    let initialArr = [];
    if (pageLen === 0) {
      initialArr = [1];
    } else if (pageLen <= 5) {
      for (let i = 1; i <= pageLen; i++) {
        initialArr.push(i);
      }
    } else {
      initialArr = [1, 2, 3, 4, 5];
    }
    return initialArr;
  };

const alignPageNumber = (checkNumber) => {
  if (pageLen > 5) {
    if (checkNumber > 3 && pageLen - checkNumber > 2)
      setPaginationArray([
        checkNumber - 2,
        checkNumber - 1,
        checkNumber,
        checkNumber + 1,
        checkNumber + 2,
      ]);
    else if (checkNumber > 3 && pageLen - checkNumber <= 2)
      setPaginationArray([
        pageLen - 4,
        pageLen - 3,
        pageLen - 2,
        pageLen - 1,
        pageLen,
      ]);
    else setPaginationArray([1, 2, 3, 4, 5]);
  }
};