State Lifting

React는 데이터의 흐름이 양방향이 아니라 단방향이다.
한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다.
그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 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에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용)
자식1에서는 2씩 올라가는 함수를 새로 만들어 사용했다.