출저
- 위코드 강의자료
- MDN
Pagination
Paging 이라고도 불리는 pagination 기능은 흔히 리스트페이지 또는 게시판에서 페이지 넘김의 구현으로 알려진 기능이다. 백엔드에서 받는 많은 데이터를 한번에 보여줄 수 없을때 일정 개수 만큼(혹은 길이 만큼) 끊어서 전달할때 사용된다.
Query String
Pagnation은 프론트엔드, 백엔드 양쪽에서 모두 구현해야 한다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달한다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.
이 과정에서 쿼리 스트링(Query String)을 사용하게 된다.
쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻한다. localhost:8000/product?limit=10&offset=5 라는 주소가 있다고 가정해 본다면, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"는 요청으로 해석된다.
limit
한 페이지에 보여줄 데이터 수
offset
데이터가 시작하는 위치(index)
- url에서
?기호는 유일무이. parameter=value로 필요한 파라미터의 값을 적는다.- 파라미터가 여러개일 경우
&를 붙여서 여러개의 파라미터를 넘길 수 있다.
예를 들어, 프론트엔드에서 상품 페이지의 화면을 구현하는 상황을 생각해 본다면,
- 결국 똑같은 껍데기(컴포넌트)에 들어갈 내용(데이터)을 바꿔주는 것
- 내용이란? => ex. 배열에 들어있는 객체(개별 상품)들
- 내용이 달라지려면 서로 다른 주소에 요청을 보내야 한다
실제 적용
아래 예제에서 fetchCoffee 부분을 보면, fetch() 를 이용하여 데이터를 받아오고 있다. 이 함수는 추후 paging 에 필요한 버튼에서 실행될 예정이다.
Pagnation 을 위해서는 위에서도 백엔드와의 상의하에 Limit 과 offset을 설정하고 이에 맞게 fetch()을 이용하여 데이터를 요청하면 된다. 이때 e.target.dataset 을 이용하여 쿼리스트링을 구성해주었다.
