페이징 처리

안녕하세요 이정환입니다.

페이징 처리는 보통 "페이지네이션" 또는 "무한스크롤" 방식을 통해 처리하게 됩니다.

페이지 네이션을 선택하실 경우 리스트 하단에 페이지네이션을 위한 버튼을 두게 되고 해당 버튼을 클릭하면 Query String의 값을 ~?page=1 처럼 변화시킵니다. 그럼 컴포넌트에서는 변화된 쿼리스트링 값에 따라 적절한 데이터를 불러와 렌더링 시켜주시면 됩니다.

무한 스크롤을 선택하실 경우 보통은 IntersectionObserver라는 DOM API를 사용하게 되는데요 이 내용의 경우 이미 잘 설명된 아티클이 많으니 몇개 첨부해드리는것으로 설명을 대신하겠습니다.

https://1-blue.github.io/posts/Intersection-Observer-API/

https://velog.io/@jsi06138/React-Intersection-Observer-API%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0