pagenation

10626 ワード
Pagenation hook project React テキストリンク
pagenation
このプロジェクトの最終日に急いで作成したページActivity page...
ここで、機能は、データのページング/フィルタリングです.
まずlimitを20個ください.各ページに20個の商品カードが設置されています.
最初はconst[userOrder,setuUserOrder]=userState("create at");
このようなコードにより、最新の順序でページに商品のデフォルト値を表示し、各フィルタウィンドウを選択するたびに異なるクエリーを送信するためにキー値部分を設定します.
useEffect(() => {
    fetch(
      `http://13.209.17.252:8000/product/list?order=${userOrder}&category=8&offset=0&limit=${LIMIT}`
    )
      .then(res => res.json())
      .then(res => {
        console.log(res);
        setProduct(res.product_list);
        setIsLoading(false);
      });
  }, [userOrder]);

>limit과 offset을 설정하여 페이지 네이션을 구현했고 아래의 코드에서는 각각의 페이지에서 20개씩의 상품카드가 나오게 구현하였다
```js
const fetchBackData = e => {
    const offset = e?.target.dataset.idx;

    fetch(
      `http://13.209.17.252:8000/product/list?order=created_at&category=8&offset=${
        LIMIT * offset
      }&limit=${LIMIT}`
    )
      .then(res => res.json())
      .then(res => {
        setProduct(res.product_list);
        setIsLoading(false);
      });
  };
これによりマッピングが与えられ、各orderにバックエンドフィルタのデータキー値が指定されます.
const BUTTON_CONTENT = {
  CONTENT_ARRAY: [
    { category: "인기순", order: "hit_count" },
    { category: "등록일순", order: "created_at" },
    { category: "평점순", order: "star_rating" },
    { category: "가격 높은순", order: "price" },
    { category: "가격 낮은순", order: "-price" },
    { category: "당일 사용 가능한", order: "-sales_rate" },
    { category: "슈퍼 호스트만", order: "five_star_count" },
  ],
};


>마지막으로 아래의 코드를 이용하여 페이지네이션 및 필터링 기능을 구현하였다.

```js
 {PAGENATTION_BTN.map((number, index) => {
              return (
                <button
                  key={index}
                  onClick={fetchBackData}
                  data-idx={number - 1}
                  className="pageNationBtnBox"
                >
                  {number}
                </button>
              );
            })}
          {BUTTON_CONTENT.CONTENT_ARRAY.map((element, index) => {
            return (
              <ModalMainContent>
                <span key={index}>{element.category}</span>
                <input
                  id={index}
                  onClick={filterUserOrder}
                  name={element.order}
                  type="checkbox"
                ></input>
              </ModalMainContent>
            );
          })}
[伯俊]1950号:A+B-3(JAVA)
brewでぶらぶらプログラムをインストールする