Pagination & Query Parameter

Pagination (Paging )

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됨. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함.
흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙함. 많은 웹사이트에서 널리 사용되고 있는 개념.
프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달함. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됨.

Query Parameter

해당 엔드포인트에 대해 질의문(query)를 보내는 요청
localhost:8000/products?limit=10&offset=5
API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 쿼리스트링.
?limit=10&offset=5 의 경우, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석

• ? 기호는 쿼리스트링의 시작을 알립니다. url 에서 ? 기호는 유일무이 합니다.
• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)
• parameter=value 로 필요한 파라미터의 값을 적음
• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있음.

useLocation().search

쿼리스트링을 이용한 페이지 네이션 기능 또한 동적 라우팅 기능과 크게 다르지 않음. 두 기능의 구현 순서를 비교 해보도록 함.

Path Parameter 에 대한 정보가 useParams 훅이 반환한 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 useLocation 훅이 반환한 객체의 search 프로퍼티 안에 담겨있음.

// current url -> localhost:3000/products?offset=10&limit=10

function ProductList() {
  const location = useLocation();

  console.log(location.search) // ?offset=10&limit=10

  return (
      ...
  )
}

이를 통해 url 에서 쿼리스트링 정보를 받아와서, 해당 정보를 통해 데이터를 요청할 수 있음.

fetch(`${API}${location.search}`)
  .then(res => res.json())
  .then(res => ...)