Pagination
Pagination(Paging 이라고도 불리는) 기능으로 서버에서 가지고 있는 데이터는 많고 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달합니다.
게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 많은 웹사이트에서 널리 사용되고 있습니다.
프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다.
Query Parameter
Query Parameter(혹은, Query String, 쿼리 스트링) : 쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻합니다.
localhost:8000/product?limit=10&offset=5 라는 주소가 있다고 가정해보겠습니다. API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 쿼리스트링 입니다.
?기호는 쿼리스트링의 시작을 알립니다. url 에서?기호는 유일무이 합니다.- limit : 한 페이지에 보여줄 데이터 수
- offset : 데이터가 시작하는 위치(index)
parameter=value로 필요한 파라미터의 값을 적습니다.- 파라미터가 여러개일 경우
&를 붙여서 여러개의 파라미터를 넘길 수 있습니다.
this.props.location.search 객체
리액트에서 쿼리스트링을 사용하기 위해서는 this.props.location.search 객체를 통해 가져올 수 있습니다.
