페이지네이션 (Pagination 또는 Paging)

• 목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼한 백엔드에 요청하고 응답받아 사용하는 방식을 말한다.

• 페이지네이션은 백이나 프론트 둘 중 한 쪽만 하는 것이 아니라 둘 다 해당 API에 대해 서로 어떤 값이 필요한지, 어떻게 데이터를 줘야 하는지 정하는 부분이 필요하다.

• 스크롤이 하단에 닿는 순간에 새로운 페이지를 가지고 와 이어서 보여주는 것도 페이지네이션 종류 중 하나이다.

페이지네이션을 구현하기 위해서는 limit과 offset의 개념이 필요하다.

• 예를 들어, 페이지에 접근하는 순간 componentDidMount에서 API를 한번 호출하고, 그 응답이 왔을 때 받은 것 그대로 state에 저장하여 보여준다.
• 더 보기 같은 버튼을 눌렀을때 그 다음 데이터를 받아 오면서 처음 보여주는 배열과 그 다음 보여 줄 배열을 합쳐 화면에 보여 준다.

limit - 한 페이지에 보여 줄 데이터 수
offset - 데이터가 시작하는 위치(index)

6개씩 데이터를 가져올 때 (limit : 6)
page number : 1 / offset : 0
page number : 2 / offset : 6

• 프론트엔드에서 백엔드에 보낼 데이터(파라미터) offset과 limit를 계속 해서 보낸다.
• 백엔드에서 이 값을 사용하여 데이터베이스에서 어느 부분을 가져올지 프론트엔드에 응답을 해준다.

// 첫 화면
const res = await fetch('https://api.com/restaurants?limit=&&offset=0);

// click event
const res = await fetch('https://api.com/restaurants?limit=&&offset=6);

• 프론트엔드에서 계속해서 변하는 값 - offset
  변하지 않는 값(상수) - limit (재활용 가능)

offset을 state로 관리하면서 클릭할 때 마다 새로운 offset으로 업데이트 하여 가지고 있으면 된다.

const LIMIT = 6;
// 보통 변하지 않는 변수는 대문자로 표현한다

const res = await fetch(input: `https://api.com/restaurants?limit=${LIMIT}&offset=0`);