[JavaScript] React - pagination

손종일·2020년 9월 28일
2

React

목록 보기
13/22
post-thumbnail

React

Pagination or Paging

백엔드에서 가지고 있는 데이터는 많아서 그 데이터를 한번에 보여주기 힘든 경우에 데이터를 일정 길이로 끊어서 전달해야합니다. 이미 많은 웹사이트에서 사용하고 있는 것이 pagination 입니다. 프론트엔드에서는 현재의 위치(Offset)과 추가로 보여주어야하는 (Limit)을 백엔드에 전달해줍니다. 백엔드에서는 그에 해당하는 길이 만큼 데이터를 끊어서 보내주게됩니다.

이 과정에서 우리는 QueryString을 사용하게 됩니다. 쿼리스트링이란 해당 엔드포인트에 query를 보내는 요청을 뜻합니다. "http://10.58.2.83:8000/drinks?limit=5&offset=5" 라는 주소가 있다고 가정한다면 이 경우에는 limit이 5이면서 offset은 5일 경우 라고 뜻하게 됩니다.

아래 예제를 통해서 어떻게 사용하는지 알아봅시다.

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

  fetchDrink = (e) => {
    const LIMIT = 10;
    // 한 페이지에 보여줄 데이터 갯수를 10개로 설정하기 위해 Limit 10으로 설정 
    const offset = e?.target.dataset.idx;	
    //각 페이지 버튼의 data-idx를 offset으로 설정

    fetch(
      `http://10.58.2.83:8000/drinks?limit=${LIMIT}&offset=${offset * LIMIT}`
   // fetch 요청이 들어올 때마다 위에서 설정했던 (페이지 버튼의 번호수 -1) * LIMIT의 데이터부터
   // LIMIT 갯수 만큼 데이터가 출력된다.
   // 즉 1페이지라면 0 ~ 10 개, 2페이지라면 10 ~ 20 개가 출력됩니다.
    )
      .then((res) => res.json())
   // 받은 데이터를 js에서 필요로 하는 데이터를 가져온다. 
   // HttpResponse가 아닌 JsonResponse로 백엔드에서 전달해준다면 해당 데이터를 받을 수 있지만
   // HttpResponse로 온다면 오류가 납니다!
      .then((res) => this.setState({ drink: res }));
   // 위에서 받은 데이터를 this.state.drink 저장합니다.
    
  }; 

  render() {
    const { drink, currentIdx } = this.state;
    const { fetchDrink } = this;
   // 비구조 할당

    return (
      <div className="Photos">
        <h1>Mini Project - Pagination</h1>
        <Buttons currentIdx={currentIdx} fetchDrink={fetchDrink} />
	// 5가지의 data-idx 0~4 까지의 버튼
        <CardList drink={drink} />
	// 데이터별로 Map을 돌려 상품들을 출력하게 해놓았다.
      </div>
    );
  }
}

export default Drink;
profile
Allday

0개의 댓글