Pagination ⏪ ⏩

흔히 게시판의 '이전/다음' 페이지를 끊어 보여주는 기능으로 익숙할 것이다.
pagination은 FRONT, BACK 양쪽에서 모두 구현해야 한다. 프론트에서는 현재의 위치 (Offest)과 추가로 보여줄 컨텐츠의 수(Limit)을 백앤드에 전달한다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.

Query string❓❔❓

이 과정에서 쿼리 스트링(Query String)을 사용하게 된다.
쿼리 스트링이란 말 그대로 해당 앤드 포인트에 대해 질의문(query)를 보내는 요청을 말한다.
localhost:8000/product?limit=10&offset=5라는 주소가 있다고 가정을 했을때, limit은 10개 단위로 끊는다는 뜻을 나타내고 offset은 몇번째 인덱스부터 시작할지를 나타낸다.

🏁정리!

• limit: 한 페이지에 보여줄 데이터 수
• offset: 데이터가 시작하는 위치(index)
• url에서 ? 기호는 유일무이하다.
• 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();
  };