TIL_53_페이지네이션

페이지네이션?

나눠서 데이터를 가져오는 것.
한번에 데이터를 다 가져오는 것은 무겁고, 유지보수에 힘들다.
한정된 네트워크 자원을 가지고 있기 때문에 효율적으로 사용하기 위한 것.
성능적인 부분을 고려해야하기 때문.
페이지를 분할해서 그 페이지에 맞는 데이터를 가져오는 것.
무한스크롤도 페이지네이션임.
페이지네이션은 프론트엔드, 백엔드 양쪽에서 모두 구현해야 함.

프론트엔드에서 현재의 위치(Offset)과 컨텐츠의 수(Limit)를 백엔드에 전달 -> 백엔드에서는 그에 해당하는 데이터를 끊어서 보내주는 방식으로 구현.

위 과정에서 쿼리 스트링을 사용하게 된다.

쿼리 스트링?

해당하는 엔드포인트에 대해 질의문을 보내는 요청을 뜻한다.
localhost:8000/product?limit=10&offset=5 이와 같은 주소가 있다면, limit=10 리밋은 10이면서, offset=5 오프셋은 5일 경우의 페이지를 보여달라는 요청으로 해석이 된다.

Limit 과 Offset

Limit 과 Offset 이라는 파라미터를 사용.
리밋은 우리가 정하는 것, 한 페이지에 얼마나 보여줄 건지에 대한 갯수.
오프셋은 인덱스 같은 것. 데이터가 시작하는 위치.
데이터를 순서에 의해서 보내지는 것.

처음에 6개의 데이터를
componentDidmount 에서 api 호출, this.setState({list})
-> 더보기를 클릭할 때마다 추가로 6개씩 가져옴

click handle 에서 api 호출, addedList = 기존 list + 새로운 6개의 데이터를 합쳐서
this.setState({list: addedList})

limit 은 한 페이지에서 보여줄 데이터의 수.
offset은 데이터가 시작하는 위치 (index)

예를 들어 한 페이지당 데이터가 즉 리밋이 6개라면,
인덱스는 0부터 시작하기 때문에 0~5.
다음 페이지의 offset은 6부터.
그 다음 페이지의 offset은 12부터 인 것.

첫화면에서의 예시 코드.

const res = await fetch(`http://api.com/restaurants?limit=6&offset=0);

클릭이벤트에서의 예시 코드.

const res = await fetch(`http://api.com/restaurants?limit=6&offset=6);

✅ 정리!

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

코드로 다시 한번 봐보자.

const LIMIT = 10;
//위 값은 컴퍼넌트 디드 마운트에서도 사용해야하기 때문에 
//전역변수로 할당. 대문자인 이유? 고정값이기 때문.

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

//데이터 로딩
componentDidMount() {
fetch(`api주소?limit=${LIMIT}`)
.then((res) => res.json())
.then((res) => this.setState({ coffee: res }));
}

fetchCoffee = (e) => {
//console.log("클릭");
  const offset = e?.target.dataset.idx;

fetch(`api주소?limit=${LIMIT}&offset=${offset * LIMIT}`);
//10을 곱해준 것.
.then((res) => res.json())
.then((res) => this.setState({ coffee = res }));
};

render() {
//console.log(coffee); 
//데이터가 열개만 들어오는 것을 확인할 수 있음.
  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;

//Buttons.js

export default function Buttons({ fetchCoffee }) {
  return (
    <div className="pageBtn">
      <button data-idx="0" onClick={fetchCoffee}>
     //data-idx? 데이터 값을 할당해준 것. -> dataset
       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>
  };
}

url Query Parameter 가져오기

위의 주소를 보자.
? 가 보인다. -> 쿼리스트링의 시작을 알리는 기호임을 알 수 있다.
해당 주소에서 ? 이후의 값이 필요할 수 있다. 이 때 location.search를 활용하면 된다.


? 이후의 값이 나온 것을 확인할 수 있다.