Pagination & Query Parameter_React

miin·2021년 10월 14일
0

React

목록 보기
17/55
post-thumbnail

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 => ...)

0개의 댓글