React 함수 구성 요소를 사용하여 부자간에props 교차

React에서 부모 구성 요소에서 하위 구성 요소로 값을 전달하는 것은 아래와 같이 충분하지만, 하위 구성 요소에서 부모 구성 요소로 값을 전달하는 방법을 몰라서 조사를 진행했습니다.

import React from 'react';

const App = () => {
  const greeting = 'Hello Function Component!';
  // 子コンポーネントにvalueをセット
  return <Headline value={greeting} />;
}

// valueをFunctionComponentの引数として使用する設定
const Headline:React.FunctionComponent<{value: any}> = ({ value }) => {
  // valueを表示
  return <h1>{value}</h1>;
}

export default App;

하위 구성 요소에서 부모 구성 요소에 값을 전달하는 방법은 vue에서 이러한 느낌을 전달하는 기교입니다.
API - Vue.js vm.$emit( eventName, […args] )

// 子コンポーネントからemit
// 第一引数が子コンポーネントに設定した要素名(親のテンプレートに@をつけて設置する)で、第二引数がコールバックの引数になる
this.$emit('method', "this is argument")

// 親コンポーネントで受け取り、コールバック関数を実行
<template>
  <div>
    <ChildComponent @method="callback"/>
  </div>
</template>
<script>
// 省略
  callback(argument) {
    console.log(argument) // this is argument
  }
// 省略
</script>

결론적으로 React는 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법이 없는 것 같습니다.
그렇다면 아이로부터 부모에게 값을 전달하고 아이가 변경할 때 부모와 연동하는 변경을 하려면 어떻게 해야 하나...?
A. 상위 어셈블리의 함수를 서브어셈블리에 전달하고 상위 어셈블리의 함수를 서브어셈블리에서 실행합니다.
props로 교환하는 것이 아니라 실행 함수로 props가 필요하지 않은 상황 자체를 고려하면 됩니까?
그럼에도 불구하고 저는 프로스가 필요해요...이런 상황에서 말하자면 이것은 단지 React의 개발 사고에서 설계 오류일 뿐이다
하는 일은 부모 구성 요소가 props를 하위 구성 요소에 전달하는 것과 다르지 않지만, 전달하는 것은 부모 구성 요소와 연결됩니다. (실제로 실행하고 확인하지 않았기 때문에 복사만 하면 오류가 발생할 수 있습니다.)

// parent
const App = () => {
  const [flag, setFlag] = React.useState(false)
  function switchFlag() {
    setState(true) // flag = true
  }
  // 子コンポーネントにswitchFlag関数をセット
  return (
    <div>
      <ChildComponent switchFlag={switchFlag}/>
    </div>
  )
}

// child
// switchFlag関数をFunctionComponentの引数として使用する設定
const ChildComponent:React.FunctionComponent<{switchFlag: any}> = ({switchFlag}) => {
  // switchFlagをボタンとして設置
  return (
    <div>
      <button onClick={switchFlag}>Click</button>
    </div>
  )
}

이 상태에서 단추를 누르면 부모 구성 요소 측의 함수를 실행하고 부모 구성 요소인state의flag가true로 바뀝니다.
하위 구성 요소에서 단추를 눌렀을 때 일부 처리를 하고 switchFlag () 에서 부모 구성 요소 함수를 실행해도 됩니다 (아래와 같은 느낌)

// child
const ChildComponent:React.FunctionComponent<{switchFlag: any}> = ({switchFlag}) => {
  function onClickHandler() {
    // なんらかの処理
    switchFlag() // 親コンポーネントのswitchFlag関数の実行
  }
  return (
    <div>
      <button onClick={onClickHandler}>Click</button>
    </div>
  )
}

여기 페이지를 참고했습니다
How to pass Props from child to parent Component?
React Function Component: Callback Function