Pagination?

• 한꺼번에 많은 양의 데이터를 보내지 않고 일정 길이로 끊어서 보내는 것을 페이지네이션 기능이라 한다.
• 페이지네이션은 백이나 프론트 둘 중 한 쪽만 하는 것이 아니라 둘 다 해당 API에 대해 서로 어떤 값이 필요한지, 어떻게 데이터를 줘야 하는지 정하는 부분이 필요.
• 스크롤이 하단에 닿는 순간에 새로운 페이지를 가지고 와 이어서 보여주는 것도 페이지네이션 종류 중 하나이다.

Pagination 구현

페이지네이션을 구현하기 위해서는 limit과 offset의 개념이 필요.

• 예를 들어, 페이지에 접근하는 순간 componentDidMount에서 API를 한번 호출하고, 그 응답이 왔을 때 받은 것 그대로 state에 저장하여 보여준다.
• 더 보기 같은 버튼을 눌렀을때 그 다음 데이터를 받아 오면서 처음 보여주는 배열과 그 다음 보여 줄 배열을 합쳐 화면에 보여 준다.

  limit : 한 페이지에 보여줄 데이터 수
  offset : 데이터가 시작하는 위치(index)
  url에서 ? 기호는 유일무이 하며 Query string의 시작을 알립니다.
  parameter=value 로 필요한 파라미터의 값을 적습니다
  파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있습니다.

• 페이지 버튼에 데이터 속성 사용하여 해당 게시글의 페이지 버튼을 눌렀을때 하기와 같이 e?.target.dataset.idx 접근이 가능합니다.

  e옆의 ?는 옵셔닐체이닝으로 javascript.info 좀 더 공부를 해봐야겠다...

PaginationButtons.js

export default function Buttons({ fetchCoffee }) {
  return (
    <div className="pageBtn">
      <button data-idx="0" onClick={fetchCoffee}>
        1
      </button>
      <button data-idx="1" onClick={fetchCoffee}>
        2
      </button>
      <button data-idx="2" onClick={fetchCoffee}>
        3
      </button>
      <button data-idx="3" onClick={fetchCoffee}>
        4
      </button>
      <button data-idx="4" onClick={fetchCoffee}>
        5
      </button>
    </div>
  );
}

CoffeeList.js

class Coffee extends Component {
  state = {
    coffee: [],
    userInput: "",
    currentIdx: 1,
  };

  // 데이터 로딩
  componentDidMount() {
    fetch("http://localhost:8000/drinks")
      .then((res) => res.json())
      .then((res) => this.setState({ coffee: res }));
  }

  fetchCoffee = (e) => {
    const LIMIT = 10;
    const offset = e?.target.dataset.idx;

    fetch(`http://url?limit=${LIMIT}&offset=${offset * LIMIT}`)
    .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>
    );
  }
}

export default Coffee;