state Lifting

state Lifting
우리는 코딩중 상태값을 조정할 때 hooks를 주로 사용한다.
그중에서도 useState의 setState를 통해 상태를 많이 변경하며 props를 통해
하위 컴포넌트에 전달하여 사용하기도한다.

하지만 React.js의 특성상 데이터의 전달은 하향식으로 이루어지며
부모에서 자식으로 props를 해주는 단방향 적인 특징을 띈다.

그렇다면 자식에서 자식 으로 즉 형제관계 간에는 어떻게 state를 조절해 줘야할까:?

그 답은 선언한 useState를 최상위로 올려 하위로 건네며 사용하는 것이다.
그렇게 되면 아래 사진처럼 state와 setState를 자유롭게 내리며 사용이 가능하다.

아래의 코드로 살펴보자

  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);
    const onClickCountUp = () => {
      setCount((prev) => prev + 1);
    };
    return (
      <div>
        <Child1 count={count} setCount={setCount} />
        <div>======================================================</div>
        <Child2 count={count} onClickCountUp={onClickCountUp} />
      </div>
    );
  }

위 코드는 가장 최상위의 부모가되는 컴포넌트이며
State를 선언해서 간단한 count함수를 만들고
자식 컴포넌트에 값과 함수를 내려줬다.

  export default function Child1(props: any) {

    const aaa = () => {
      props.setCount((prev) => prev + 1);
    };
    return (
      <div>
        <div>자식1의 카운트: {props.count}</div>
        <button onClick={aaa}>카운트 올리기!!!</button>
      </div>
    );
  }

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

props를 통해 각각 전달받은 값들을 적용시켰으며

둘중 어느버튼을 누르게 되더라도 같이 카운트가 올라가게된다.

이것을 state Lifting 이라하며
여러개의 컴포넌트에서 같은 state값을 적용시키고 변경시키고 싶을 때 사용된다.