React - Query Parameter / TIL - 10

Pagination

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없다면 흔히 말해 쇼핑몰에서 페이지마다 보여주는 상품의 개수는 정해져있고 계속해서 다음페이지를 눌러 보는 경우라고 생각하면 편하다.

1. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달

2. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현

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 로 필요한 파라미터의 값

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

동적 라우팅과 페이지네이션의 차이

url 이동시 고유한 id 값이 url 에 포함되거나 쿼리스트링이 포함되거나 둘중에 하나!