State-Lifting

컴포넌트를 나눠서 스크립트를 작성하다보면

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야하는 경우가 생긴다.

React에서는 단방향 데이터흐름을 가지고 있기 때문에, 하위 컴포넌트는 상위 컴포넌트의 데이터 데이터의 형태, 또는 타입만 알고 state에서 왔는지, 하드코딩 했는지는 알지 못한다.

이럴 때 state 끌어올리기라는 방법을 사용한다.

쉽게 말하면, 같은 state 값이 필요한 서로 다른 하위폴더에서, 두 컴포넌트의 공통 컴포넌트 까지 state선언을 끌어 올리면 된다는 것이다.

import { useState } from "react";
import Child1 from "../../src/components/units/board/14-lifting-state-up/Child1";
import Child2 from "../../src/components/units/board/14-lifting-state-up/Child2";

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

  // 방법 - 1
  const onClickCountUp = () => {
    setCount((prev) => prev + 1);
  };

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

위의 코드는 지금 까지 설명한 것들에 대한 예제 코드이다