PEACOCK 프로젝트를 하면서 상품 리뷰 기능을 구현해야 했었다.
상품 리뷰를 처음에는 3개만 보여주고, 더보기를 누를때 마다 3개씩 더 보여주는 방식이었다.
내가 맡은 기능은 아니었지만, 팀원이 이 부분을 어떻게 구현해야할지 고민해서 같이 고민해보다가 Pagination에 대해서 알게되었다.
Pagination 하는 이유?
백엔드에서 100개 상품에 대한 데이터를 가지고 있다고 가정해보자.
현재 컴포넌트에서 상품을 20개씩 끊어서 보여주고 싶은데, 한번에 100개의 데이터를 모두 받아와서 20개만 보여주는거라면 정말 비효율적일 것이다.
따라서 서버에 데이터를 요청할 때 20개씩 끊어서 보내기 위해, 현재 데이터의 위치(Offset)와 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달한다.
이 때 Query Parameter를 사용하게 된다.
요청 방법
fetch할 API 주소에 offset과 limit을 query parameter로 포함해서 보내면 된다.
fetch(`http://10.58.2.208/product/review?limit=5&offset=2`,{})?는 지금부터 쿼리문이 시작될것이라는 뜻이다. limit은 불러올 데이터의 수이다. 댓글을 3개씨 보여주고 싶으면 limit=3이다. offset은 데이터가 시작하는 인덱스이다. 처음으로 불러오는 것이라면 offset=0일 것이고, 이미 3개 불러온 뒤에 한 번 더 불러오는 것이라면 offset=2일 것이다.
이렇게 query parameter는 parameter = value 형식으로 표현하고, 여러가지의 조건을 합쳐야 할 때는 &를 이용하여 합쳐준다.
URL 가져오는 방법
더보기 버튼을 눌렀을 때, 쿼리스트링이 포함된 URL로 이동을 한다.
해당 페이지로 이동 하고 나면, 그 페이지에서 해당 URL을 알아야 이를 바탕으로 API 요청을 보낼 것이다.
동적라우팅 포스팅에서 볼 수 있듯이, Routes 객체와 연결된 하위 컴포넌트들은 Routes로 부터 props값을 넘겨 받는데, 그 중 location은 현재 URL 경로에 대한 정보를 가지고 있다.
따라서 this.props.location.search를 부르게 되면, ?offset=10&limit=10과 같은 현재 페이지 주소를 가져오게 된다.
이렇게 가져온 URL을 바탕으로 API 호출을 하면 된다.
