[React] Header component 사용하기

 

완성본

 

1. 간단한 Header 부분만들기

Component 로 된 Button 으로도 넣을수 있어서 유익..

<MyHeader headText={"App"} 
leftChild={<MyButton text={"왼쪽 버튼"} onClick={()=> alert("왼쪽클릭")} />}
rightChild={<MyButton text={"오른족 버튼"} onClick={()=>alert("오른쪽 클릭")}/>}
/>

 

 

1. {내용} 부분에 Button 을 넣어도 정상적으로 작동 완료

const MyHeader = ({headText,leftChild,rightChild}) => {
  return <header>
      <div className="head_btn_left">
          {leftChild}
      </div>
      <div className="head_text">
          {headText}
      </div>
      <div className="head_btn_right">
          {rightChild}
      </div>
  </header>
}

export default MyHeader;