페이지네이션 개념

리스트에서 데이터를 한번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 것을 의미한다. 인스타그램의 무한스크롤 역시 페이지네이션의 개념과 같다.

페이지네이션은 프론트, 백 모두에서 구현해야 한다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달한다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.

이 과정에서 쿼리 스트링(Query String)을 사용하게 된다. 쿼리 스트링이란 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 의미한다.

페이지네이션의 parameter
limit 또는 page size : 한 페이지에 보여줄 데이터의 수
offset : 데이터가 시작하는 위치 (index)

localhost:8000/product?limit=10&offset=5

"limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"는 요청으로 해석됩니다.

아직 HOOKS 를 배우기 전이라 강의가 100% 이해되지는 않는다. 참고 자료를 찾았다! 나중에 훅스를 배우고 나서 추가로 포스팅을 수정하도록 하겠다..

참고자료 : https://ing-yeo.net/2019/08/react-beginner-3/