[리액트,React] Props 부모-자식 전달

구조는 Template<함수형> - 자식1<class형> - 자식2 <함수형> 설계 되어있다.

1. 먼저 최하위 자식인 MyModal에서 onDeleteLeave 함수를 실행할 경우 props로 넘어온 handleSubmit에다가 startDate값과 cnt를 넘겨준다.
2. 그럴경우 부모의 바로 밑인 하위자식이 CalendarForm은 handleSubmit으로 받아온 값을 this.props.handleApplyTemps로 값을 넘겨준다.
3. 그러면 상위부모인 Template은 CalendarForm의 handleApplyTemps 값을 가진 handleSubmit의 값을 받아온다.

 function MyModal(props) { const onDeleteLeave = param => { props.handleSubmit(startDate,cnt); } }

class CalendarForm extends Component { handleSubmit = (e,cnt)=>{ this.props.handleApplyTemps(e,cnt); } render() { <MyModal //function형 handleSubmit = {this.handleSubmit} /> } }

 const Template = () => { const handleApplyTemps = (text,cnt) =>{ console.log("text : "+text + "cnt : "+cnt); setSt(text); setCnt(cnt); } return ( <div> <CalendarForm handleApplyTemps = {handleApplyTemps} /> </div> ) }