[Paggination page nation]

ページの処理方法페이지네이션ページの下の数字形式のリンクをクリックすると、他のページを参照できます.무한스크롤ユーザがページ下部に到達すると、コンテンツがロードされ続けるユーザエクスペリエンス(UX)

import { useState } from "react";
import React, { MouseEvent } from "react";
import * as P from "./pagination";

export default function Pagination(props) {
  const [startPage, setStartPage] = useState(1);
  const [isPage, setIsPage] = useState();
  const [isActive, setIsActive] = useState(false);

  function onClickPage(event: MouseEvent<HTMLElement>) {
    props.refetch({ page: Number(event.target.id) });
    setIsPage(Number(event.target.id));
  }

  function onClickPrevPage() {
    if (startPage === 1) {
      setIsActive(true);
      return;
    }
    setStartPage((prev) => prev - 10);
    props.refetch({ page: startPage - 10 });
  }

  function onClickNextPage() {
    if (startPage + 10 > props.lastPage) {
      return;
      // setIsActive(true);
    }
    setStartPage((prev) => prev + 10);
    props.refetch({ page: startPage + 10 });
  }

  return (
    <P.Pagination>
      <P.Wrapper>
        <P.PrevButton
          type="button"
          isActive={isActive}
          onClick={onClickPrevPage}
        ></P.PrevButton>
        {new Array(10).fill(1).map(
          (_, index) =>
            index + startPage <= props.lastPage && (
              <P.PageNumber
                key={index + startPage}
                onClick={onClickPage}
                id={String(index + startPage)}
                style={{
                  color:
                    isPage === Number(index + startPage) ? "#dfdfdf" : "black",
                }}
              >{` ${index + startPage} `}</P.PageNumber>
            )
        )}
        <P.NextButton
          type="button"
          isActive={isActive}
          onClick={onClickNextPage}
        ></P.NextButton>
      </P.Wrapper>
    </P.Pagination>
  );
}

[昇格State]

state 끌어올리기要素間で状態が共有されると、状態は、要素間で最も近い共通の親要素に昇格する.
同じデータに対する変更を複数の構成部品に反映する必要がある場合は、親構成部品から子構成部品に渡されるsetStateを使用して、子構成部品でstateを管理できます.
1つの親エレメントを複数のサブエレメントに分離することで、各エレメントの全長を100行以内にすることができます.
親構成部品

import Child1 from "../../src/components/units/14-lifting-state-up/Child1";
import Child2 from "../../src/components/units/14-lifting-state-up/Child2";
import { useState } from "react";
export default function LiftStateUpPage() {
  const [count, setCount] = useState(0);
]
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <div>
      <Child1 count={count} onClick={onClickCountUp}></Child1>
      <div>====================</div>
      <Child2 count={count}></Child2>
    </div>
  );
}

child 1

export default function Child1(props) {
  return (
    <div>
      <div>자식1 카운트 : {props.count}</div>
      <button onClick={props.onClickCountUp}>카운트 올리기</button>
    </div>
  );
}

child 2

export default function Child2(props) {
  return (
    <div>
      <div>자식2 카운트 : {props.count}</div>
      <button>카운트 올리기</button>
    </div>
  );
}