흔히 게시판의 '이전/다음' 페이지를 끊어 보여주는 기능으로 익숙할 것이다.
pagination은 FRONT, BACK 양쪽에서 모두 구현해야 한다. 프론트에서는 현재의 위치 (Offest)
과 추가로 보여줄 컨텐츠의 수(Limit)
을 백앤드에 전달한다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.
이 과정에서 쿼리 스트링(Query String)을 사용하게 된다.
쿼리 스트링이란 말 그대로 해당 앤드 포인트에 대해 질의문(query)를 보내는 요청을 말한다.
localhost:8000/product?limit=10&offset=5
라는 주소가 있다고 가정을 했을때, limit
은 10개 단위로 끊는다는 뜻을 나타내고 offset
은 몇번째 인덱스부터 시작할지를 나타낸다.
?
기호는 유일무이하다.parameter = value
로 필요한 파라미터의 값을 적는다.&
을 붙여서 여러개의 파라미터를 넘길 수 있다.<Button data-set='2' onClick={requestLogin}>
const requestLogin = (e) => {
console.log(e.target.dataset);
}
// data-set이라는 attribute로 버튼에 고유번호를 부여할 수 있다.
useEffect(() => {
fetch(`http://localhost:8000/drinks?limit=${LIMIT}&offset=${offset}`)
.then((res) => res.json())
.then((res) => this.setState({ coffee: res }));
});
const fetchCoffee = (e) => {
const LIMIT = 10;
const offset = e?.target.dataset.idx * LIMIT;
fetch();
};