state 끌어올리기

global state:
자식1과 자식2 컴포넌트가 state를 공유하고 싶으면 자식1, 자식2의 state를 부모 컴포넌트로 올리면 된다.
부모 컴포넌트를 자식 컴포넌트로 내려줄 때는 props를 사용한다.
이때 자식1, 2가 같은 값을 바꾸려면 setState를 사용하면 된다.

• 부모

import Child1 from "../../src/components/units/stateup/Child1";
import Child2 from "../../src/components/units/stateup/Child2";
import { useState } from "react";
export default function StateUpPage() {
  const [count, setCount] = useState(0);
  function onClickCounter() {
    setCount((prev) => prev + 1);
  }
  return (
    <>
      <Child1 count={count} onClickCounter={onClickCounter} />
      <div>========================</div>
      <Child2 count={count} onClickCounter={onClickCounter} />
      {/* <button onClick={onClickCounter}>카운트올리기 </button> */}
    </>
  );
}

• 자식1

// import { useState } from "react";

export default function Child1(props) {
  //   const [count, setCount] = useState(0);
  //   function onClickCounter() {
  //       setCount((prev) => prev + 1);
  //   }
  return (
    <>
      <div>자식1 카운트: {props.count}</div>
      <button onClick={props.onClickCounter}>카운트올리기 </button>
    </>
  );
}

• 자식2

// import { useState } from "react";

export default function Child2(props) {
  //   const [count, setCount] = useState(0);
  //   function onClickCounter() {
  //     setCount((prev) => prev + 1);
  //   }
  return (
    <>
      <div>자식2 카운트: {props.count}</div>
      <button onClick={props.onClickCounter}>카운트올리기 </button>
    </>
  );
}