페이지네이션(pagination)
페이지를 처리하는 방법으로는 크게 일반적인 방식과 무한스크롤 방식, 2가지 방법이 있다. 그 중 오늘은 일반적인 방식의 페이지 처리를 알아보자.
일반적이라 하면 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법이다.
우선 시작 페이지 값을 알려줄 state를 생성한다.
const [startPage, setStartPage] = useState(1);
페이지 번호를 눌렀을 때 화면을 해당 페이지값으로 재구현 해 줄 함수를 작성한다.
const onClickPage = (event) =>
{ if (event.target instaceof Element)
refetch({page: Number(event.target.id)});
};
한 페이지에 10개씩 보여준다고 했을때 이전 목록으로 이동하게 해주는 함수와 다음 목록으로 이동하게 해주는 함수를 작성한다.
const onClickPrevPage = () =>{
if (startPage === 1) return;
setStartPage((prev) => prev -10);
};
const onClickNextPage = () =>{
if (startPage + 10 > lastPage) return;
setStartPage((prev) => prev +10);
};
여기서 'lastPage'는 게시물이 총 몇개있는지 알려주는 값에 10을 나누고 올림처리를 해서 나오는 수이다. 10을 나누는 이유는 한 페이지에 10개의 게시물을 보여주기 때문이다.
다음으로 .map()을 이용하여 데이터를 뿌려주는 리스트 화면을 만들어준다.
<div> {data?.해당데이터.map((el) => { <div key = {el.id}> {el.뿌려주고자하는 데이터} </div> })} </div>
다음으로 페이지 이동을 위한 번호와 화살표가 있는 네비게이션을 만들어준다.
<span onClick={onClickPrevPage}> {`<`} </span>
{new Array(10).fill(1).map((_, index) =>
startPage + index <= lastPage && (
<span key={startPage + index}
onClick={onClickPage}
id={String(startPage+index)}
>
{startPage + index}
</span>
))}
<span onClick={onClickNextPage}>{`>`}</span>
