페이지네이션
책의 페이지처럼 데이터를 나눠서 제공하는 것
많은 양의 데이터를 제공할 때 사용하는 방법
오프셋 기반 페이지네이션
개수를 기준으로 데이터를 나눈다.
커서 기반 페이지네이션
특정 데이터를 가리키는 값
지금까지 받은 데이터를 표시한 책갈피
데이터를 중복이나 데이터를 빠짐없이 받아올 수 있는 장점이 있음
페이지네이션
오프셋 기반 = 받아온 개수 기준
커서 기반 = 데이터를 가리키는 커서 기준
크롬 개발자 도구에서
fetch('https://learn.codeit.kr/0633/film-reviews?offset=0&limit=6')?offset=0&limit=6을 추가해서 확인해본다.
그러면 6개만 보여지는 것을 확인할 수 있다.
offset 값을 6으로 수정하고 다시 확인해보면
그 다음 6개의 데이터가 잘 전달된 것을 확인할 수 있다.
여기서 api에서는 다음 데이터를 불러올 수 있는지 hasNext라는 값으로 알려준다.
더보기 버튼을 누르면 6개씩 추가가되어 보여지는 동작을 연습해보았다.
api.js에서 query변수에 offset, limit을 추가해주고 수정해준다.
offset, hasNext를 useState로 담아준다.
그리고 LIMIT라는 변수를 만들어 초기값으로 6을 넣어준다.
만약에 offset값이 0이라면 reviews를 보여주고
offset값이 0이 아니라면 setItems에 items와 reviews를 깊은 복사를 해준다.
handleLoadMore 함수에 handleLoad()에 offset, limit을 추가한다.
useEffect에도 추가한다.
disabled는 해당버튼이 비활성화되는 속성이다.
disabled의 prop으로 hasNext의 반대값을 내려준다.
다음 값이 없는 경우에 disbled 값이 true가 되어 버튼이 비활성화가 된다.
조건부 랜더링
더 보여줄 데이터들이 없을 떄 버튼이 보이지 않도록 하는 방법
hasNext값이 참일 때는 뒤에 있는 조건을 계산해서 값을 사용
뒤에있는 표현식이 JSX니까 버튼이 랜더링이 된다
hasNext값이 거짓일 때는 뒤에 있는 표현식을 계산하지 않고
앞에 조건이 hasNext값을 사용 이 값은 false이다.
react에서 false값은 랜더링하지 않기 때문에 버튼이 보이지 않게 된다.
이렇게 조건에 따라서 다르게 랜더링하는 것을 조건부 랜더링
