Pagination

Pagination이란?
서버의 데이터가 많은 경우 화면에 모두 보여줄 때 일정 이벤트를 통해 부분적으로 보여지는 것을 의미한다.

이번 2차 프로젝트에 적용한 스크롤 이벤트를 활용한 Pagination을 기록하면서 앞으로도 유용하게 사용해야겠다.

• initialData - 화면에 보여줄 데이터를 보관
• offsetData - 서버로 요청할 범위 지정
• fetching - 서버에서 data를 요청하는 상태 값
• LIMIT - 일정하게 받아올 범위

• fetch 함수를 설정
• API 주소에 offsetData 변수에 지정된 값을 넣어준다
• 데이터를 받아오고 기존의 데이터에 새로운 데이터를 포함하여야 되기 때문에 스프레드 연산자를 통해 구현
• setFetching을 통해 fetch를 중단한다
• 이후 offsetData + LIMIT통해 다음에 받아올 범위를 설정

• 스크롤 이벤트를 정의한다
• 스크롤의 현재위치를 가져온다
• 사용자가 보여지는 화면의 높이를 가져온다
• 총 화면의 높이를 가져온다
• 조건문으로 스크롤이 최하단으로 갔을때 setFetching을 통해 상태값을 변경한다

• 의존성 배열에 빈배열 넣어 스크롤 이벤트가 렌더 후 한번만 실행되게 한다
• fetching 상태 값이 변경 되면 endScrollEvent가 실행되고 마지막 offset값 보다 작으면 fetch를 실행하여 data를 받아오고 offset 값에 LIMIT을 더 해준다

• fetch가 되면 Data를 받아오는 시간동안 Loading...이라는 문구가 보이고 Data가 화면에 출력된다.