인프런 커뮤니티 질문&답변

윤토벤님의 프로필 이미지
윤토벤

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.2) UI 구현하기

페이징 처리

해결된 질문

작성

·

147

·

수정됨

0

안녕하세요. 선생님. todolist를 따라하며 완성하였는데요.

todolist의 list들이 많아지면 페이징 처리를 통해 나누어 봐야 할 거 같은데 이 기능은 어떻게 구현하면 좋을까요??

(RESTFUL API로 개발하면 프론트, 백엔드 양쪽에서 페이징 처리를 해야 하는지,, )

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

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

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

페이지 네이션을 선택하실 경우 리스트 하단에 페이지네이션을 위한 버튼을 두게 되고 해당 버튼을 클릭하면 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

윤토벤님의 프로필 이미지
윤토벤
질문자

답변 감사합니다°

윤토벤님의 프로필 이미지
윤토벤

작성한 질문수

질문하기