[React] Pagination & Query Parameter

짱쫑·2022년 1월 16일
0

Routing

목록 보기
3/3
post-thumbnail

Pagination

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 뿌릴 수 없는 경우에 사용한다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다.
보통 게시판이나 페이지의 "이전 / 다음" 같은 페이지 이동기능을 알고 있을텐데 많은 사이트에서 쓰는 기능이다.
프론트앤드에서 현재의 위치(Offset)와 추가로 보여줄 컨텐츠의 수(Limit)를 백앤드에 전달한다. 백앤드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.

Query Parameter

이 과정에서 Query Parameter(혹은, Query String)를 사용하게 된다. 쿼리 스트링이란 말 그대로 해당 앤드포인트에 대해 질의문(Query)를 보내는 요청을 뜻한다.
예를들어, localhost:8000/product?limit=10&offset=5라는 주소가 있다고 가정하고, API 뒷부분에 붙어있는 ? 로 시작하는 텍스트가 쿼리스트링이다.
?limit=10&offset=5의 경우, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라"는 요청으로 해석된다.

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

useLocation().search

쿼리스트링을 이용한 페이지 네이션 기능 또한 동적 라우팅 기능과 크게 다르지 않다. 두 기능의 구현 순서를 비교해보면,
| 동적 라우팅 | 페이지네이션 |
| -------- | --------- |
| 1. 리스트 페이지에서 카드를 클릭한다.| 1. 리스트 페이지에서 버튼을 클릭한다. |
| 2. url 이동을 한다. 이때, 카드의 고유한 id값이 url에 포함된다.| 2. url 이동을 한다. 이때 url에는 각 버튼에 해당하는 쿼리스트링이 포함된다. |
| 3. 이동한 페이지에서, url에 담겨 있는 id값을 params객체를 이용하여 가져온다.| 3. 이동한 페이지에서, url에 담겨있는 쿼리스트링을 location 객체를 이용하여 가져온다. |
| 4. 가져온 id값을 이용하여 데이터를 요청한다. | 4. 가져온 쿼리스트링을 이용하여 데이터를 요청한다. |

Path Parameter에 대한 정보는 match 객체 안에 담겨있었듯이, 쿼리스트링에 대한 정보는 location 객체 안에 담겨있다.

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

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

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

	return (
	   ...				
	)
}

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

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

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

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

	return (
	   ...				
	)
}
profile
不怕慢, 只怕站

0개의 댓글