Pagination 과 Infinite Scrolling

Pagination

페이지네이션은 페이지 번호를 이용해서 페이지를 이동하는 방식이다.

페이지네이션을 만들기 위해 필요한 준비물

• pagination 컴포넌트
• pagination 을 적용할 컴포넌트
• 둘을 합쳐서 한 번에 보여줄 페이지 컴포넌트

물론 하나의 컴포넌트 페이지에 작성해도 되지만 페이지네이션을 만들어 두는 이유가 다른 페이지에서도 import 하여 사용하기 위함이므로 따로 작성하는 편이 낫다.

위의 컴포넌트 목록을 각각 pagination, board, index 라고 정의했을 때 필요한 내용은 다음과 같다.

• pagination
  • 페이지를 이동시킬 onClick 이벤트 함수들(현재 페이지 번호, 이전 페이지, 다음 페이지)
  • 페이지 번호를 받아올 함수(new Array(n).fill(1).map(_, index) 사용)

• board
  • 페이지 이동에 따라 보여줄 fetch UI

• index
  • 보여주고자 하는 데이터의 query 문
  • useQuery를 사용해 props로 넘겨줄 setState

마지막 페이지 구하기

const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);

Infinite-scroll

인피니트 스크롤이란 말 그대로 끝나지 않는 스크롤이다. 요즘 SNS 를 떠올려보면 이해하기 쉽다. 데이터가 존재하는만큼 스크롤이 계속 생성된다.

yarn add react-infinite-scroller 설치
yarn add @types/react-infinite-scroller --dev 타입스크립트 버전도 같이 설치해주면 타입 오류가 나지 않는다.

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // 여기에 인피니트 스크롤을 적용시키고 싶은 데이터를 넣어준다
</InfiniteScroll>

인피니트 스크롤을 사용할 때 스프레드 연산자의 원리를 적용해서 데이터를 불러올 수 있다.

// spread 연산자 사용 X
const a = [1, 2, 3]
const b = [4, 5, 6]
const c =[a, b] //[[1,2,3],[4,5,6]]

// spread 연산자 사용 O
const a = [1, 2, 3]
const b = [4, 5, 6]
const c =[...a, ...b] //[1,2,3,4,5,6]]

아래 예시처럼 댓글에 댓글을 계속해서 로딩해 오게끔 만들 수 있다.

fetchBoardComments: [...prev.fetchBoardComments, ...fetchMoreResult.fetchBoardComments]
		       // fetchBoardComments에 저장된 이전 데이터   // fetchMore를 통해 받아올 새로운 데이터