[ 40 ] 페이지네이션 - 첫째페이지 , 마지막 페이지 리팩토링

1페이지에서 이전페이지를 누르면 음수 ( - ) 페이지로 이동하지 않도록 설정해주기 

const onClickPrevPage = (): void => {
    if (startPage === 1) return;

    setStartPage(startPage - 10);
    refetch({ page: startPage - 10 });
  };

마지막 페이지 리팩토링

1. 총 게시글의 개수를 가져온 뒤 나누기 ( / ) 10 을 해서 마지막 페이지를 구한다.

const FETCH_BOARDS_COUNT = gql`
  query {
    fetchBoardsCount
  }
`;

// data : dataBoardsCount 로 설정해줘 data 이름이 중복되지 않게 한다

  const { data: dataBoardsCount } = useQuery<
    Pick<IQuery, "fetchBoardsCount">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS_COUNT);
  
 // 마지막 페이지 구하기
 const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount ?? 10 / 10);

2. 마지막 페이지 이후 번호들은 렌더링 되지 않도록 한다.

3항연산자로 구현

{new Array(10).fill(1).map((_, index) => {
return index + startPage <= lastPage ? (
<span
key={index + startPage}
id={String(index + startPage)}
onClick={onClickPage}
style={{ margin: "5px" }}
>
{index + 1}
</span>
) : (
<span></span>
);

 

조건부 렌더링으로 구현

      {new Array(10).fill(1).map((_, index) => {
        return (
          index + startPage <= lastPage && (
            <span
              key={index + startPage}
              id={String(index + startPage)}
              onClick={onClickPage}
              style={{ margin: "5px" }}
            >
              {index + 1}
            </span>
          )
        );
      })}

3.마지막 페이지는 다음페이지 버튼을 눌러도 아무 반응이 없도록 설정한다

  const onClickNextPage = (): void => {
    if (startPage + 10 > lastPage) return;
    setStartPage(startPage + 10);
    refetch({ page: startPage + 10 });
  };