State Lifting

리액트는 단방향 데이터 흐름이라서 하위(자식) 컴포넌트 요소를 상위(부모) 컴포넌트에게 물려주지 못한다.
(부모->자식 흐름)
이게 흐름을 파악할 수 있어서 편리하긴 하지만 단점도 있는데 부모 컴포넌트 안에 자식이 여러개 있을때 자식에서 자식으로 state를 넘겨주는 것이 안된다.
이 때 state lifting(상태 끌어올리기)로 상태 관리를 할 수 있다.

하위 컴포넌트에 props로 상위 컴포넌트 함수를 전달해주고 하위 컴포넌트에서는 그 함수를 호출한다.
이때 state를 변경해주는 함수, setState를 전달하고 하위에서는 호출한다

상위 컴포넌트 하나, 그 안에 하위 컴포넌트가 두 개 있다고 가정해보면

<상위 컴포넌트>

import { useState } from "react";

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

  return (
    <div>
      <Child1 count={count} setCount={setCount} />
      <div>=========================================</div>
      <Child2 count={count} />
    </div>
  );
}

이렇게 상위 컴포넌트에서 setState 함수를 props를 이용해서 하위로 물려주면
하위 컴포넌트들의 count 상태가 변한다. lifting을 모를 때는 상위 컴포넌트에서 onClick 함수를 정의해서 setState가 아닌 onClick 함수 자체를 하위 컴포넌트로 넘겼는데 이제는 하위 컴포넌트에서도 상태를 바꿀 수 있다.

<하위 컴포넌트 1>

export default function Child1(props) {

  const onClickCountUp = () => {
    props.setCount((prev) => prev + 1);
  };

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

<하위 컴포넌트 2>

export default function Child2(props) {
  return (
    <div>
      <div>자식 2 카운트: {props.count}</div>
      <button>카운트 올리기</button>
    </div>
  );
}

같은 데이터에 대해 여러 개의 컴포넌트가 반응해야 할 때 이용하면 편할거 같다.