Pagination (Paging):
목록형 UI 에서 데이터를 한번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식을 말함.
꼭 게시판처럼 1~10 페이지가 있는 형식뿐 아니라 인스타그램 처럼 가장 하단의 스크롤로 내려왔을 때 새로운 데이터를 가지고 오는것도 모두 페이지네이션임.
페이지네이션을 구현하기 위해서는 해당 api에 대해 백앤드와 약속되있어야함
limit (한 페이지에 보여줄 데이터 수) 과 offset (데이터가 시작하는 위치--index) 이라는 개념을 사용
구현 방법
페이지에 들어가자마자
1-1. componentDidMount 에서 api 호출
1-2. this.setState({ list })
더보기 click event 마다 추가 정해진 값만큼의 개수 가져오기
1-1 click handler 에서 api 호출
1-2 addedList = 기존 리스트 + 새로운 6개 합쳐서 this.setState
프론트는 오프셋과 리밋 데이터를 계속 보내주고, 백엔드는 그걸 받고 쿼리해서 데이터를 보내주면됨
ex) 첫 화면
const res = await fetch(https://api.com/restaurants?limit=6&offset=0);
두번째 화면
const res = await fetch(https://api.com/restaurants?limit=6&offset=6);
front 는 limit / offset 이라는 키에 쿼리스트링으로 보내주면
백은 그에 맞게 돌려 보내주면됨
