State Lifting

State 끌어올리기를 사용하는 이유?

리액트의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 단방향 방식이다!
그런데 자식 컴포넌트1의 state를 자식 컴포넌트2에게 보여주는게 불가능하다!
또 자식 컴포넌트가 state를 부모 컴포넌트에게 보여주는 것도 불가능하다!

그래서 State 끌어올리기 사용 방법은??

1. 부모 컴포넌트에서 state를 선언하고 자식에게 props를 통해서 전달하는 방법이 있다!
2. 또 setState를 자식한테 전달해서 부모 State값을 바꿀 수 있다!!

실제 사용 방법

// 부모 컴포넌트
import { useState } from "react";

import Child1 from "../../../src/commons/components/units/15-lifting-state-up/Child1";
import Child2 from "../../../src/commons/components/units/15-lifting-state-up/Child2";

// import를 통해서 자식 컴포넌트와 연결!

export default function CountLetDacumentPage(): JSX.Element {
  const [count, setCount] = useState(0);
  // 부모 컴포넌트에서 count 선언

  const onClickCount = (): void => {
    setCount((prev) => prev + 1);
  }; // 부모 컴포넌트에서 함수를 만들어서 자식 컴포넌트2에게 props로 전달!

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

// 자식 컴포넌트1 ( 부모의 setState를 받아서 부모 변수를 조작하는 방법!)
export default function Child1(props: any): JSX.Element {
  function onClickCountUp(): void {
    props.setCount((perv: number) => perv + 1);
  }

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

// 자식컴포넌트1에서 자체적으로 함수를 만들어서 조작

// 자식 컴포넌트2 ( 부모의 함수를 받아서 부모의 변수를 조작하는 방법)
export default function Child2(props: any): JSX.Element {
  return (
    <div>
      <div>자식2의 카운트: {props.count}</div>
      <button onClick={props.onClickCount}>카운트 올리기!!!</button>
    </div> 
  );
// 부모의 카운터 함수를 받아서 부모의 카운터 변수를 조작!!
}