만약 onClick을 포함한 손자 컴포넌트를 할아버지 컴포넌트에서 함수를 동직시키려는 사고 자체가 틀린 것인지, 제가 어떤 부분을 실수 하고 있는지 질문드립니다. (컴포턴트 구성을 잘못한 것일까요?)

App.js

Todowrite.js 컴포넌트

Working.js 컴포넌트

InnerButtun.js 컴포턴트

삭제기능과 완료 기능을 구현하려고 하다보니, onclick 부분에서 문제가 생겼습니다. **Todolist(useState)**가 있는 부분은 Todowrite.js인데, 삭제와 완료 버튼이 생성되는 컴포넌트는 **Working.js(색상과 칠드런)**와 InnerButtun.js 입니다.

제 생각으로는 **Working.js(색상과 칠드런)**에서 props로 Func의 두가지 경우 삭제와 완료를 텍스트로 넘겨서 InnerButtun.js에서 만들고 만들어진, 버튼을 포함한 TodoBox의 완제품이 Todowrite.js에 도착했을 때 이곳에서 함수를 통해서 **Todolist(useState)**를 변경하고자 했습니다.

문제는 <button> 태그가 실질적으로 기록되는 InnerButtun.js 에서부터 발생되었는데, 받아온 Func에 대해서 InnerButtun.js 에서확인하면

//Working.js 컴포넌트 >> InnerButtun.js  컴포턴트
<InnerButton Color="red" Func="onClickDeleteHandler">삭제</InnerButton>

다음과 같이 잘 찍혀집니다.

const Func = props.Func
  console.log(Func) // onClickDeleteHandler

이후에 <button> 태그에 onClick={Func}를 넣어주고자 했습니다.

return (
    <button style={style} onClick={Func}>{props.children}</button>
  )

react-dom.development.js:86 Warning: Expected onClick listener to be a function, instead got a value of string type.

위와 같은 오류로 인해서 콘솔에 경고창이 발생되며, 무언가 잘못된 것 같은 직감이 발생되었습니다. 함수를 동작시킬 Todowrite.js 컴포넌트의 부분에서 함수를 기록했어도