コードキャンプ開始キャンプ14日目

ページング

ページを処理する方法は、一般的な方法と無限のスクロール方法の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を分割する理由は、1ページに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>