Pagination 이란?

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 보여줄 수 없는 경우
우리는 사용해야된다 => Pagination!
데이터를 일정 길이로 끊어서 전달 하는 것이 point!

FrontEnd에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다.

• 똑같은 레이아웃(컴포넌트)에 들어갈 내용(데이터)을 바꿔주는 것
• 내용이란? => 배열에 들어있는 객체(개별 상품)들
• 내용이 달라지려면 서로 다른 주소에 요청을 보내야 한다.

코드로는 아래의 순서로 흘러가게 된다.
1) componentDidMount에서 API를 호출한다.
2) this.setState({해당값})을 넣어 list를 갱신한다.
3) 더보기 버튼을 클릭(clickEvent)할 때마다 해당 handler에서 API를 호출한다.
4) addList에서 기존list + 새로운list를 합쳐 새롭게 setState로 갱신한다.

1. componentDidMount에서 API를 호출한다.

• 임의로 만든 mock data를 호출해보자
  

• 아래와 같은 fetch 경로를 입력하면 데이터가 잘 나오기 시작한다!

2. state로 url을 변경하자.

• 그렇다면 이제 state로 url을 관리해주는 로직을 구성하자
  

• limit와 offset을 변수로 만든 후, 쿼리스트링으로 주소를 바꿔주었다.
• offset의 값이 변할 예정이므로 함수의 인자는 offset으로 지정!

3. 바뀔 state값을 가져올 Handler의 구성

• 버튼을 누르면 currentIdx라는 state에 idx를 가져오는 핸들러를 만들었다.

4. 바뀐 값을 적용할 ComponentDidUpdate

• componentDidMount는 fetchPhotos를 실행하며 인자로 currentIdx를 가져온다
• currentIdx는 초기값으로 1을 가지고 있다(최초 렌더를 위한 값)

• componentDidUpdate를 통해 fietchPhotos의 값이 바뀔 경우 다시 렌더가 될 수 있도록 함수를 구성한다. 여기서 인자는 클릭을 통해서 바뀌는 currentIdx를 가져온다.