페이지네이션? 🤔

게시판의 글 목록을 볼 수 있도록 만든것

페이지네이션 기본 구성

 <span onClick={onClickPrevPage}>{`<`}</span>
      {["aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa"].map(
        (_, index) =>
          index + startPage <= props.lastPage && (
            <span
              key={index + startPage}
              onClick={onClickPage}
              id={String(index + startPage)}

              {` `} {index + startPage}
            </span>
          )
      )}
      <span onClick={onClickNextPage}> {`>`}</span>

aaa를 써주고 map 함수를 돌리더라도 aaa를 사용하는게 아니라 index를 사용하기 때문에 9개의 aaa 만큼 index로 반환되어서 페이지목록인 1,2,3,...,9까지 반환된다.

✍️ 번호클릭함수

const onClickPage = (event) => {
    props.refetch({ page: Number(event.target.id) });
  };

✍️ 이전페이지 클릭 함수

 const onClickPrevPage = () => {
    if (startPage === 1) return;
    setStartPage((prev) => prev - 10);
    props.refetch({ page: startPage - 10 });
  };

✍️ 다음페이지 클릭 함수

const onClickNextPage = () => {
    if (!(startPage + 10 <= props.lastPage)) return;
    setStartPage((prev) => prev + 10);
    props.refetch({ page: startPage + 10 });
  };

아래의 번호 목록을 페이지네이션이라고 한다

무한스크롤? 🤔

💻 댓글 데이터와 fetchMore 기텍스트능을 쓰기위해 선언해주기

const { data, fetchMore } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: {
      boardId: router.query.number,
    },
  });

💻 onLoadMore 함수 만들어주기
fetchMore 과 updateQuery를 사용한다.

function onLoadMore() {
  if (!data) return;
  fetchMore({
    variables: {
      page: Math.ceil(data?.fetchBoardComments.length / 10) + 1,
                      }, 
    // 페이지는 전체댓글 갯수에 1페이지에 10개니까 
    // 10으로나뉜뒤 올림을 해줘야 전체 페이지 개수를 알수있다.
    updateQuery: (prev, { fetchMoreResult }) => {
      return {
        fetchBoardComments: [
          ...prev.fetchBoardComments,
          ...fetchMoreResult.fetchBoardComments,
        ],
      };
    },
  });
}
// updateQuery에는 복사를 사용해서 무한스크롤때 불러올 댓글페이지들을 가져온다.

💻 presenter
InfiniteScroll 을 import 해서 Docs를 참고해 사용할 기능들을 넣어준다.

import InfiniteScroll from "react-infinite-scroller";
<InfiniteScroll pageStart={0} loadMore={props.onLoadMore} hasMore={true}>
  {props.data?.fetchBoardComments.map((el) => (
    <CommentsListUIItem key={el._id} el={el} />
  ))}
</InfiniteScroll>