#4.0 Props

 

<Btn banana="Confirm" />

 

컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다

  function Btn(props) {
    return <button style={{
      backgroundColor: "tomato",
      color: "white",
      padding: "10px 20px",
      borderRadius: 10,
      border: 0
    }}>{props.txt}</button>;
  }

 

props는 object이기 때문에

아래와 같이 바로 받을 수도 있다

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

 

big 속성에 Boolean 값을 넣을 때는 "" 가 아닌 {} 를 이용해서 넣어주기

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


  function App() {
    return (
      <div>
        <Btn txt="Save Changes" big={true} />
        <Btn txt="Continue" big={false} />
      </div>
    );
  }