[코드캠프 3주차]state Lifting

리액트는 단방향 상태 관리 프레임워크이다.만약 하나의 상태가 여러 컴포넌트에 영향을 준다면 해당 컴포넌트들 간의 가장 가까운 상위 컴포넌트에 상태를 끌어올리면 된다.
이것을 State 끌어올리기(State Lifting)라고 한다.

하지만 실제로는 하위컴포넌트에서 상위 컴포넌트로 state를 끌어올리는 일은 딱히 없고, React 공식문서 에서는 상위 컴포넌트에 정의된 상태를 변경 하는 Handler 자체를 하위 컴포넌트의 props로 전달하고 하위 컴포넌트에서 이를 콜백함수로 실행하는 방법을 권장한다.
이렇게 하면 단방향 데이터 흐름을 지킬 수 있는것이다.

// 상위 컴포넌트
function count() {
const [Parentcount,setParentCount] = useState(0);
  // 상태 변경 함수
  const handleCount = (count) => {
    setParentCount(count=>count+1);
  };

  return (
    <div>
      <countForm onButtonClick={handleCount}/>	// props로 전달
      <ul>
        {count}
      </ul>
    </div>
  );
}

// 하위 컴포넌트
function countForm({onButtonClick}) {	// 비구조화 할당
const[ChildCount,setChildCount]=useState(0)
  const countUp = () => {
    onButtonClick(ChildCount);	// props로 전달받은 onButtonClick을 실행. 부모 포넌트의 상태 변경
  };

  return (
    <div>
      <h1>카운트 증가</h1>
    </div>
  );
}