State Lifting

reactは双方向ではなく一方向です.
親構成部品または兄弟構成部品は、1つの構成部品では使用できません.
したがって、2つの兄弟構成部品で機能を同時に使用する場合は、親構成部品にコードを記述し、propsを使用して各サブ構成部品で使用する必要があります.

// 부모컴포넌트 //
import { useState } from "react";
import Child1 from "./child1";
import Child2 from "./child2";
export default function LiftingStateUpPage() {
  const [count, setCount] = useState(0);

  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <div>
      <Child1 count={count} setCount={setCount} />
      <div>-------------------------------</div>
      <Child2 count={count} onClickCountUp={onClickCountUp} />
    </div>
  );
}

// 자식 컴포넌트1 //
export default function Child1(props) {
  const onClickCountUp2 = () => {
    props.setCount((prev) => prev + 2);
  };
  return (
    <div>
      <div>Child1 Count : {props.count}</div>
      <button onClick={onClickCountUp2}>count up</button>
    </div>
  );
}

// 자식컴포넌트2 //
export default function Child2(props) {
  return (
    <div>
      <div>Child2 Count : {props.count}</div>
      <button onClick={props.onClickCountUp}>count up</button>
    </div>
  );
}

子供2では、親のそれぞれが上昇する機能(propsを使用)を使用しています.
サブ1では、2つの2つの関数が新しく作成され、使用されます.