Pagination / Infinite-scroll

페이지 처리를 하는 방법에는 일반적인 방식과 무한스크롤 방식이 있다.

먼저, 일반적인 방식을 알아보자.

1. 페이지네이션: 페이지 번호를 클릭해서 이동하는 방식

• 필요한 요소로는 시작페이지 값을 알려줄 state,

• 페이지를 눌렀을 때 화면을 해당 페이지로 재구현 해줄 함수,

• 이전 목록들,

• 다음 목록들 이다!
  

• map을 이용해서 데이터 리스트를 생성 후, 네비게이션을 생성 후 사용하면된다!

==========================================

2. 무한스크롤 방식

• 유튜브, 페이스북, 인스타그램과 같이 아래로 스크롤할 때, 계속해서 내려가는 페이지 처리 방식이다.

가장 많이 사용되는 2개의 라이브러리인 React Infinite Scroller와 react-infinite-scroll-component 중 오늘은 후자를 알아보겠다.

여기서 loadFunc의 함수를 알아보자.

우리는 스크롤을 내렸을 때 데이터들을 보여줘야한다.

이 부분에서 유심히 봐야하는 부분은 스프레드 연산자이다.

위의 스크린샷이 의미하는 바는, 만약 fetchBoards를 했을때 fetchMoreResult가 없으면, 이전까지의 데이터를 보여줘라가 되는것이다.

if문 밖에는 반대케이스인데, 만약 fetchBoards했을때 fetchMoreResult가 있으면, 이전 데이터 + 추가 데이터를 함께 보여줘라가 되는 것이다!

이와같은 방법으로 무한스크롤을 적용할 수 있다.