페이지 네이션
목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식. 프론트 백 둘다 약속을 하는 것
꼭 게시판처럼 1~10페이지가 있는 형식뿐 아니라 인스타그램 처럼 가장 하단의 스크롤로 내려왔을 때 새로운 데이터를 가지고 오는 것도 모두 페이지네이션이다.
페이지네이션을 구현하기 위해서는 해당 api에 대해 백엔드와 미리 약속이 되어있어야 한다. 페이지네이션에서는 주로 limit와 offset이라는 parameter를 사용한다.
만약 offset 0, limit 10일 경우 0번부터 9번까지의 결과를 리턴
{
"stores": [
{
"id": 809,
"no": 398,
"name": "거제고현",
"address": "경남 거제시 고현동 35-8 104호,105호",
"phone": "055-634-0979"
},
{
"id": 810,
"no": 397,
"name": "경산영남대",
"address": "경상북도 경산시 대동 166-6",
"phone": "053-818-7771"
},
{
"id": 811,
"no": 396,
"name": "목포남악",
"address": "전라남도 무안군 삼향읍 남악3로 79",
"phone": "061-980-3310"
},
{
"id": 812,
"no": 395,
"name": "대구반월당",
"address": "대구광역시 중구 달구벌대로 2076",
"phone": "070-4122-0077"
},
{
"id": 813,
"no": 394,
"name": "대구교대",
"address": "대구광역시 남구 중앙대로 243",
"phone": "053-622-6348"
},
{
"id": 814,
"no": 393,
"name": "성남위례",
"address": "경기도 성남시 수정구 위례광장로 104",
"phone": "031-602-6126"
},
{
"id": 815,
"no": 392,
"name": "수원아주대",
"address": "경기도 수원시 팔달구 아주로 49-1",
"phone": "031-211-0369"
},
{
"id": 816,
"no": 391,
"name": "부산사상",
"address": "부산시 사상구 사상로211",
"phone": "051-900-5226"
},
{
"id": 817,
"no": 390,
"name": "당진읍내",
"address": "충청남도 당진시 읍내동 225-1 금화빌딩 1층 101호",
"phone": "041-356-2731"
},
{
"id": 818,
"no": 389,
"name": "쌍문역",
"address": "서울특별시 도봉구 도봉로 468, 1층 102호, 102-1호",
"phone": "02-999-5906"
}
],
"total": 397
}