[TIL]9月16日PagiNation,event-booling

今日はページング、event-boolingの応用について学びました.
ページングとは?
ページングは、掲示板に投稿を表示するときにリストされる方法です.
大体2つの方法があります.

無限スクロール方法

<1 2 3 4 5>方法

無限スクロールの方法は簡単に考えて、フェイスブックやユーチューブのようにスクロールすると、ずっと投稿が出てきます.
もう1つの方法は、ページをめくると同時に投稿を公開するページ上の投稿を指定することです.
今日は2つ目の方法を学びました.
ページングの適用方法
ページングを適用する場合は、まずquery設定が必要です.
これまでqueryはまだpageを書いていませんが、pageを書いてからページを分けることができます.

ページタイプを入力した後、ページ表示にクエリーを追加します.

fetchBoardsCountは、これらの投稿が何ページ目にあるかを判断できるクエリーです.
これでクエリー設定は終了します.
ページングするオブジェクトは、投稿、コメント、ページタグスタイル、または無限スタイルによって異なります.
変数を設定します.

まずstartPageという名前のstateを設定し、初期値を1に設定します.
この言葉は1ページ目が1ページ目だということです.
次に、fetchBoardsのデータ、refetchクエリー、変数はstartPageのstate値を作成します.
また、fetchBoardsCountをクエリーし、dataBoardsCountというクエリーを作成する必要があります.
ページ方式では、最後のページを表示し、lastPageという変数を作成して、次のように配置する必要があります.
Math.ceil(dataBoardsCount?.fetchBoardsCount/10)
これはfetchBoardsCountを10に引き上げることを意味する.
前のページ、次のページをクリックするときに使用する関数を定義します.

PrevPage、Next Pageの関数を定義します.
PrevPage
startPageが1の場合は、すぐに戻ります.そうしないと、前のページから10を減算した値が計算されます.
次の内容が含まれます.
startPage+10がlastPageより大きい場合は、すぐに戻ります.そうしないと、前のページに10を加えた値が計算されます.
クエリー、変数、関数などの設定が完了し、ページに適用されるようになりました.

<div>
        {data?.fetchBoards.map((el) => (
          <div key={el.id}>{el.title}</div>
        ))}
      </div>
      <br />
      <span onClick={onClickPrevPage}>&#60;</span>
      {new Array(10).fill(1).map((_, index) => (
        <Page
          key={startPage + index}
          onClick={onClickPage}
          id={String(startPage + index)}
        >
          {startPage + index}
        </Page>
      ))}

      <span onClick={onClickNextPage}>&#62;</span>

map関数を使用して返します.
mapにインポートする内容と適用するキー値を設定します.
次に、直接ページを含む部分に10個の新しい配列を作成し、その値を1に塗りつぶします.
このセクションをmap関数に再変換し、適切なインデックスを入れます.
この部分はまだ完全に理解されていないので、もっと使うべきです.
EventBubbling
eventBubblingは簡単です.

投稿は一般的にこのような形式で、投稿をクリックして移動したい場合は、どこでonClickをあげるべきか分からないことが多い.
すべての属性にonClickを与えると移動しますが、かなり面倒な作業です.
その時はeventBubblingを使います.

  function onClickRow(event) {
    alert("클릭!");
    alert(event.currentTarget.id);
  }

このように活動するcurrentTarget.idを追加します.
event.target.idとは少し違う方法です.
これにより、領域の任意の場所をクリックして投稿に移動できます.