문제

<button onClick={() => setPage(1)}>{`<<`}</button>
<button onClick={() => setPage((pre) => pre - 1)}> {`<`}</button>

/////////////////////////////
{status === "success" &&
  new Array(Math.ceil(data.totalComments / 20)).fill(null).map((_, i) => (
    <button onClick={() => setPage(i + 1)} key={i}>{i + 1}</button>
  ))}
////////////////////////////////

<button onClick={() => setPage((pre) => pre + 1)}> {`>`}</button>
<button onClick={() => setPage(Math.ceil(data.totalComments / 20))}>
  {`>>`}
</button>

모든 페이지로 이동하는 버튼이 보여지게 되는 상황이 발생함.

사용자 입장에서 불필요한 부분까지 페이지 버튼이 보여진다고 판단되어 일정 범위 내의 페이지 버튼만 보여지도록 구현하고자 함.

해결

기준이 되는(사용자에게 보여주는) 페이지의 개수를 5개로 정하고 현재 페이지가 항상 중앙으로 가도록 설정함

const { page, setPage, totalCount } = props;

const [pageArr, setPageArr] = useState([1, 2, 3, 4, 5]);

const lastPage = Math.ceil(totalCount / 20);

useEffect(() => {
  if (page === 1 || page === 2) {
    setPageArr([1, 2, 3, 4, 5]);
  } else if (page === lastPage - 1 || page === lastPage) {
    setPageArr([lastPage - 4, lastPage - 3, lastPage - 2, lastPage - 1, lastPage]);
  } else {
    setPageArr([page - 2, page - 1, page, page + 1, page + 2]);
  }
}, [page]);

현재 페이지 기준으로 직전, 직후 2개 까지의 페이지 버튼만 보이도록 구성함.

직전, 직후의 페이지 개수가 2개 이하인 페이지의 경우, 각각의 끝에서 5개까지 페이지가 보여지도록 구성함.

하지만 여기서 문제발생!

댓글수가 적어서 페이지가 1개 혹은 2개밖에 없다면? 즉 총 페이지의 개수가 5개 이하일 경우에는? 따로 처리를 해 주어야할 필요성이 있음.

따라서, 총 페이지수가 5개 이하일경우 그 갯수만큼만 페이지가 나오도록 해야함

useEffect(() => {
  if (lastPage <= 5) {
    const newArr = new Array(lastPage).fill(null).map((_, i) => i + 1);
    setPageArr(newArr);
  } else if (page === 1 || page === 2) {
    setPageArr([1, 2, 3, 4, 5]);
  } else if (page === lastPage - 1 || page === lastPage) {
    setPageArr([lastPage - 4, lastPage - 3, lastPage - 2, lastPage - 1, lastPage]);
  } else {
    setPageArr([page - 2, page - 1, page, page + 1, page + 2]);
  }
}, [page]);

마지막 페이지의 값이 5이하일경우 그 갯수만큼 배열을 만들어서 페이지를 만들도록 함