React-Props

props 기본 구조 예제

function Btn(props) {
  return (
    <div>
      <button>{props.banana}</button>
      <button>{props.big}</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <Btn banana="yes" big={1} />
      <Btn banana="no"big={0} />
    </div>
  )
}

이벤트를 props로 전달할때

function Btn(props) {
  console.log(props.text);
  return (
    <div>
      <h2>{props.text}</h2>
      <button onClick={props.apple}>{props.banana}</button>
      <button>{props.big}</button>
    </div>
  )
}

function App() {
  const [value,setValue] = useState("current");
  const handleClick= () => {
    setValue("change")
  }
  return (
    <div>
      <Btn banana="yes" big={1} text={value} apple={handleClick} />
      <Btn banana="no" big={0} text="oh" />
    </div>
  )
}

스타일 추가, 기본값 예제

function Btn({text,fontSize = 18}) {
  return (
    <div>
      <button
        style={{
          backgroundColor:"tomato",
          color:"white",
          padding:"10px 20px",
          border:0,
          borderRadius:10,
          fontSize:fontSize,
        }}
      >{text}</button>
    </div>
  )
}

function App() {
  return (
    <div>
      <Btn text="yes" fontSize={18}  />
      
      <Btn text="no"   />
    </div>
  )
}

fontSize는 JS 문법으로 기본값을 줄수도 있다. 두개의 Btn이 똑같은 모양을 가지게 될것