Pagination

Pagination?

:백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다!
Pagnation은 프론트엔드, 백엔드 양쪽에서 모두 구현해야 합니다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다.

fetchCoffee = (e) => {
  
    const LIMIT = 10;
    const offset = e?.target.dataset.idx;
    
    fetch(`http://10.58.0.89:8000/drinks?LIMIT=${LIMIT}&offset=${offset}`)
      .then((res) => res.json())
      .then((res) => this.setState({ coffee: res }));
  };

  render() {
    const { coffee, currentIdx } = this.state;
    const { fetchCoffee } = this;

    return (
      <div className="Photos">
        <h1>Mini Project - Pagination</h1>
        <Buttons currentIdx={currentIdx} fetchCoffee={fetchCoffee} />
        <CardList coffee={coffee} />
      </div>
    );
  }