Pagination & Query Parameter_React

Pagination

• Paging 이라고도 불림
• 백엔드에서 가지고 있는 많은 데이터들을 한 화면에 전부 보여줄 수 없는 경우에 사용된다
  즉, 일정 길이로 끊어서 전달
• 흔히 '이전/다음 페이지'
• 프론트에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달
  백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식
• ex) 더보기(무한스크롤), 페이지 영역

Query Parameter

• 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 의미

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

• API뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 쿼리스트링 이다
• ?limit=10&offset=5의 경우
  'limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라'는 요청의 의미
• ? 기호는 쿼리스트링의 시작을 알린다. url에서 ? 기호는 유일무이 하다
• limit: 한 페이지에서 보여줄 데이터 수
• offset: 데이터가 시작하는 위치(index)
• parameter=value 로 필요한 파라미터의 값을 적는다
• 파라미터가 여러개일 경우 & 를 붙여서 여러개의 파라미터를 넘길 수 있다

this.props.location.search

• 쿼리스트링을 이용한 페이지 네이션 기능과 동적 라우팅 기능의 구현 순서

  동적 라우팅

1. 리스트 페이지에서 카드를 클릭
2. url 이동. 이때, 카드의 고유한 id 값이 url에 포함 됨
3. 이동한 페이지에서, url에 담겨있는 id값을 match 객체를 이용해서 가져옴
4. 가져온 id값을 이용하여 데이터를 요청

페이지네이션

1. 리스트 페이지에서 버튼을 클릭한다
2. url 이동을 한다. 이때 url에는 각 버튼에 해당하는 쿼리스트링이 포함 됨
3. 이동한 페이지에서 url에 담겨있는 쿼리스트링을 location객체를 이용하여 가져온다
4. 가져온 쿼리스트링을 이용하여 데이터를 요청

location

• 쿼리스트링에 대한 정보가 담겨있다

//current url -> localhost:3000/products?offset=10&limit=10
class ProductList extends React.Component{
  ...
  render(){
    console.log(this.porps.location.search)//?offset=10&limit=10
    return(
      ...
      )}
}

따라서 url에서 쿼리스트링에 대한 정보를 받아와서, 해당 정보를 통해 데이터를 요청

fetch(`${APL}${this.props.location.search}`)
	.then(res => res.json())
	.then(res => ...)