[React] Pagination

✅ Pagination

• 백엔드에서 가지고있는 수많은 데이터를 전부 보여줄 수 없는 경우에 사용한다.
  모든 데이터를 한 번에 보여줄 수 없다면 일정 길이로 끊어서 전달해주는 것이 필요
• 프론트에서는 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를백엔드에 전달해줘야 한다.
• 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현
• 이 과정에서 퀴리 스트링을 사용하게 되는데, localhost:8000/product?limit=10&offset=5라는주소가 있다면, “limit이10이면서 offset이5일 경우의 product 페이지를 보여달라”는 요청으로 해석된다.

✅ Pagination 실제 구현 예시

const LIMIT = 6;
const [offset, setOffset] = useState(0);

const getMoreItem = async () => {
const nextOffset = LIMIT + offset;
const res = await fetch(`http://localhost:8000/product?limit=${LIMIT}&offset=${nextOffset}`)
const Json = await res.json();

setOffset(nextOffset);
};

• LIMIT과 같이 변하지 않는 상수는 대문자로 작성하면 좋다.
• offset의 초기값은 0에서 시작한다.
• getMoreItem이란 함수가 실행될 때 마다 offset은 6, 12, 18 ...과 같이 6씩 증가한다.
• 즉, 어떤 버튼을 누를 때 마다 다음 6개의 아이템이 순차적으로화면에 표시되는 것이다.