페이지네이션에 대해 배워보자
페이지네이션 혹은 페이징이라고도 한다.
정확한 의미는 목록형 ui에서 데이터를 한번에 가지고 오는게 아니라 (목록형 ui는 일반적인 쇼핑몰처럼 메인페이지 있는 목록이 쭉나오는 그런 ui 그런데에서 분명 상품이 몇천개 있는데 그걸 한번에 가져오는게 아니라 필요한만큼 화면에 보이는 만큼만 백엔드에 요청하고 응답받아서 사용하는 방식을 말한다.
프론트와 백엔드 둘다 해당 api에 대해서 페이지네이션을 하기로 약속을하고 서로 어떤 값이 필요하고 줘야할지 대화가 필요한 부분이다.
이런 페이지로 나눠져 있는 것
인스타그램처럼 쭉내려오다가 목록 끝에서 살짝 멈추고 스크롤이 하단에 닿는순간 새로운 페이지를 다시 가져와서 이어서 보여주는 페이지네이션종류중 하나
프론트앤드 측면에서 볼때 이러한 망고플레이트 같이 음식점을 목록으로 보여주는 화면이 있다고하자.
여기는 처음에 들어오자마자 맞닿뜨리는 메인페이지이다.
더보기를 버튼에 온클릭 이벤트가 발생할떄마다 6개씩 더 붙는 기능. 페이지에 접근하자마자 1-1. componentDidMount에서 api호출
1-2 this.setState({list})
리밋은 한페이지에 보여줄 데이터의 수
혹은 페이지사이즈라고도 한다.
오프셋은 데이터가 시작하는 위치.
식당에 대한 테이블을 보도록하자
페이지 네이션으로 6개씩 가져오기로했고
취항로3가부터 친친까지가 리미트고
오프셋이 데이터가 시작되는 위치라고 했으므로 아이디는 1이지만 프로그래밍할떈 0부터 시작하니까 .
0~5까지 총6개를 가지는것이다.
그다음에는 오프셋6부터 시작해서 리밋6개하면
그다음은 12부터 6개 그런것이다.
프론트엔드에서도 백엔드한테 보낼 데이터가 백엔드 api 앤드포인트 뒤에 물음표해가지고 뒤에 보내는 파라미터의 오프셋과 리미트를 계속해서 구현해내줄거고
백엔드에서는 그값을 이용해서 데이터베이스에서 몇번쨰부터 어디서부터 어디까지 가지고 오면되는지해서 쿼리를해가지고 프론트앤드한테 응답을 해주면 된다.
맨처음에 컴포넌트디드마운트해서 url이 url.com이고 앤드포인트가 레스토랑이면 뒤에 파라미터 붙일떄는 물음표 붙이는것이고, 분명히 이건 메소드가 get일것이고 리미트 6개 오프셋 최초 0 그다음에 더보기 눌렀을때 클릭핸들러에다가 다시 6개 또 가져오고 오프셋은 6
프론트앤드에서 계속 변하는 값은 오프셋이고 리미트는 계속 같은값이고 이런거는 상수로 가지고있고 상수로 6을 저장해서 재활용할수있게하고 오프셋은 스테이트로 관리하면서 클릭할떄마다 계속 새로운 오프셋으로 업데이트해가지고 가지고 있도록하자
이렇게해서 개념이 생각보다 굉장히 쉽다.
