React_버튼 계층구조 이벤트 처리

App

import ChildComponent from "./components/ChildComponent"

export default function App(){

  return(

    <>

    <h1>App</h1>

    <ChildComponent ></ChildComponent>

    </>

  )

}

 

ChildComponent

import SubChildComponent from "./SubChildComponent"

export default function ChildComponent(props){          //props빠짐

    function handelEvent(v){

        console.log("handelEvent: "+ v)

    }

    return(

      <>

      <h2>ChildComponent</h2>

      <SubChildComponent onSelect={(e) => handelEvent(e)}>ChildComponent에서</SubChildComponent>

      </>

    )

  }

 

SubChildComponent

export default function SubChildComponent(props){       //{children, onSelect}대신

    console.log(props)

    const{onSelect} = props; //이벤트 받기

    return(

      <>

        <h3>SubChildComponent</h3>

        <button onClick={onSelect}>call</button>

      </>

    )

  }