잠깐! Pagination이란?

백엔드의 많은 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용된다. 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달한다.

이 Pagination을 위해 Query parameter가 사용됩니다.

Query parameter

말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻한다. API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 query parameter입니다. ?limit=10&offset=5 의 경우,

• limit : 한 페이지에 보여줄 데이터 수
• offset : 데이터가 시작하는 위치(index)
  즉, "limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청이다.

사용방법은 앞서 보았던 path parameter와 크게 다르지 않다.

this.props.location.search을 사용할 뿐!

Users.js

const LIMIT = 20;
class Users extends Component {
  state = {
    users: [],
  };

  // 데이터 로딩
  componentDidMount() {
    fetch("https://node-pagnation.herokuapp.com/users")
      .then((res) => res.json())
      .then((res) => this.setState({ users: res.users }));
  }
  componentDidUpdate(preveProps, _) {
    if (preveProps.location.search !== this.props.location.search) {
      fetch(
        `https://node-pagnation.herokuapp.com/users${this.props.location.search}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ users: res.users }));
    }
  }

  handleClick = (index) => {
    const query = `limit=${LIMIT}&offset=${index * LIMIT}`;
    this.props.history.push(`/pagination?${query}`);
  };

  render() {
    const { users } = this.state;
    console.log(this.props.history);
    console.log(this.props.location);
    return (
      <div className="Photos">
        <h1>Mini Project - Pagination</h1>
        <Buttons handleClick={this.handleClick} />
        <CardList users={users} />
      </div>
    );
  }
}

export default Users;

'Buttons.js'

class Buttons extends Component {
  render() {
    const { handleClick } = this.props;
    return (
      <div className="pageBtn">
        <button onClick={() => handleClick(0)}>1</button>
        <button onClick={() => handleClick(1)}>2</button>
        <button onClick={() => handleClick(2)}>3</button>
        <button onClick={() => handleClick(3)}>4</button>
        <button onClick={() => handleClick(4)}>5</button>
      </div>
    );
  }
}

export default Buttons;