[React #14] 페이지네이션과 Query Parameter

Pagination

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

Query Parameter

• 이 과정에서 Query Parameter(혹은, Query String, 쿼리 스트링)를 사용한다.

• 쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻한다.

• 예를 들어, localhost:8000/products?limit=10&offset=5 라는 주소가 있다고 가정했을때, API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 쿼리스트링이다.

• ?limit=10&offset=5 의 경우, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석된다.

• ? : 쿼리스트링의 시작. url 에서 ? 기호는 유일무이

• limit : 한 페이지에 보여줄 데이터 수

• offset : 데이터가 시작하는 위치(index)

• parameter=value 로 필요한 파라미터의 값을 적습니다.

• 파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있다.

useLoacation().search

동적 라우팅 vs 페이지네이션

• 동적 라우팅

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

• 페이지네이션

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

• 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 (
		...
	)**
}

• limit, offSet은 네이밍으로 바뀔 수 있다. (ex: pageNumber)

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

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