[ 41 ] 페이지네이션 - State Lifting 리팩토링

State Lifting

페이지네이션의 현재 페이지 상태값을 게시글 목록 등 형제 컴포넌트에서도 사용하기 위해서는 부모 컴포넌트에서 상태값을 관리하는 패턴이 State Lifting 이다.

예시코드 

부모 컴포넌트 

import { useState } from "react";
import Child1 from "../../../src/components/units/15-lifting-state-up/Child1";
import Child2 from "../../../src/components/units/15-lifting-state-up/Child2";

export default function CounterLetDocumentPage() {
  const [count, setCount] = useState(0);

  const onClickCount = (): void => {
    setCount((prev) => prev + 1);
  };
  return (
    <>
      <Child1 count={count} setCount={setCount} />
      <div> ===========================</div>
      <Child2 count={count} onClickCount={onClickCount} />
    </>
  );
}

자식 컴포넌트 1

setCount를 props 로 받아와 함수 안에서 사용

export default function Child1(props: any): JSX.Element {
  function onClickCountUp() {
    props.setCount((prev: number) => prev + 1);
  }

  return (
    <div>
      <div id="qqq">자식 1 의 {props.count}</div>
      <button onClick={onClickCountUp}>카운트 올리기!</button>
    </div>
  );
}

자식 컴포넌트 2

부모 컴포넌트로부터 함수를 ( props.onClickCount ) 받아 사용. 1번 자식 컴포넌트와 기능상 동일하다

export default function Child2(props: any): JSX.Element {
  return (
    <div>
      <div id="qqq">자식 2 의 {props.count}</div>
      <button onClick={props.onClickCount}>카운트 올리기!</button>
    </div>
  );
}