State Lifting

State 끌어올리기

• React 의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식, 단방향 데이터 흐름 을 따르고 있습니다.
• 단방향 데이터 흐름의 장점은 기능 변경 사항에 대한 코드 수정이 적어지고, 복잡하지 않아 코드의 흐름을 알기 쉽다는 점입니다.
• 단방향 데이터 흐름은 자식 컴포넌트1 의 state 를 자식 컴포넌트2 에서 보여주는 것이 불가능합니다.
• 해결 방법은 자식 컴포넌트의 state 와 setState 를 부모 컴포넌트로 끌어올려 선언해주면 됩니다. 그리고 props 로 내려주면 자식 컴포넌트1, 2 에서 모두 state 를 사용할 수 있게 됩니다.

ex)

// 부모 컴포넌트 - index.tsx
import Child1 from "../../src/components/units/14-lifting-state-up/Child1";
import Child2 from "../../src/components/units/14-lifting-state-up/Child2";
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>
  );
}

// 자식 컴포넌트 - Child1.tsx
export default function Child1(props) {

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

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

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