SWR (1) 썸네일형 리스트형 [React] pagination: 무한 스크롤 구현하기(+SWR 라이브러리) 이 글은 페이지네이션 컴포넌트를 만드는 법에 대해 다룬다. 페이지네이션이란, 대량의 데이터를 보여줄 때 데이터를 전부 요청하지 않고 일부만 요청하는 방식이다. 예컨대, 쇼핑몰에서 칫솔을 검색하면 수 만개의 상품 중에서 20개 정도만 보여주고 나머지는 다음 페이지를 클릭할 때 보여준다. 이 방식이 왜 필요할까? 만약 유저가 페이지를 요청할 때 마다 대량의 데이터를 모두 가져온다면, 시간이 많이 들 뿐만 아니라 db에서 데이터를 처리하는 비용까지 크기 때문이다. 페이지네이션은 일반적으로 두 가지 방법이 사용된다. 무한 스크롤: 스크롤을 일정 수준 내리면 추가적인 상품 데이터를 요청하는 방식이다. 버튼 컴포넌트: 유저가 페이지 선택 버튼을 직접 클릭하는 방식이다. 이 글은 후자를 다룰 예정이다. 아래의 예시를.. 이전 1 다음