[ Pagination 페이지네이션 ]

페이지 처리 방식
페이지네이션 페이지 하단에 있는 숫자 형식의 링크를 클릭해서 다른 페이지들을 탐색할 수 있다
무한스크롤 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(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 끌어올리기 컴포넌트 간 state를 공유하는 경우가 있을때, 컴포넌트 간 가장 가까운 공통 부모 컴포넌트로 state를 끌어 올린다.
동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 경우 사용하게 되는데 즉, 부모컴포넌트에서 자식컴포넌트로 setState까지 넘겨주어 자식컴포넌트에서 state를 관리할 수 있다.
하나의 부모 컴포넌트를 여러개의 자식 컴포넌트로 분리함으로써, 각각의 컴포넌트들의 총 길이를 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>
  );
}