React Parenst-Child

자식의 값이 부모에게 전달 될 때
부모가 자식에게 함수를 전달하려 값을 받는 방법이 있다.

1. Home.js 페이지를 랜더링 할 때 함수를 같이 넘겨준다.

const Home =() => { 

const[changeSide, setChangeSide] = useState("");

//자식 페이지에서 바뀌는 값을 그대로 가져온다.
  const cPage = (e) => {
    setChangeSide(e);
  }
  
  return(
   <Mainbody>  
       {changeSide === "반갑습니다" 
       && <MyPage changePage={cPage}/>}   
       //하위 페이지는 그대로 있어야 한다.
       {changeSide === "맴버십" && <MemberShip/>} 
       {changeSide === "회원탈퇴" && <Secession />} 
  </Mainbody>
  );
}

2. MyPage

const MyPage =(props)=>{
    //프롭스로 값을 받아온다.
    const {changePage}=props;
  
     {MyPageMenu1.map(pm=>(
         <InnerContain key={pm.name} 
              active={sidemenu === pm.name} 
               onClick={()=>{
                 //onClick에 두개의 함수를 넣는 법
                 onSelect(pm.name);
                 //pm.name값이 home의 e값으로 들어간다.
                 changePage(pm.name);
               }}>
             <h2>{pm.name}</h2> <br/> 
             <span>{pm.info}</span>
         </InnerContain>
      ))}