[React] Props

Props

컴포넌트에 속성을 장착해줌. 리액트에서는 속성을 Props라고 부른다.
ex)
<img src="image.jpg" width="100" height="100">

내용을 가지고 있는 props 만들어주기. function(props).

*(props)는 object이다.

function Btn(props) {
	return (
    <button style={{
          backgroundColor:"tomato",
          color:"white",
          padding:"10px 20px",
          border: 0,
          borderRadius 10,
        }}>
      //두개의 버튼이 생성됨
      {props.banana}
     </button>
    );
}

위와 같은 코드. Short cut으로 작성

//{banana로 작성}
function Btn({banana}) {
	return (
    <button style={{
          backgroundColor:"tomato",
          color:"white",
          padding:"10px 20px",
          border: 0,
          borderRadius: 10,
        }}>
      //두개의 버튼이 생성됨
      {banana}
     </button>
    );
}

내용이 들어간 function - 위 props 가져오기

function App(){
	return(
      <div>
      	<Btn banana="Save Changes" />
        <Btn banana="Continue" />
      <div/>
    )
}

같은 Btn 안에 다른 props를 만들 수 있음.
첫번째 btn에 big={true}추가.
첫번째 Btn의 big은 true가 되고,
두번째 Btn의 big은 undefined가 됨
그럼 이 둘은 같은 개수의 인자 (또는 props)를 갖고 있지만 그 내용은 달라짐

//{big} 추가
function Btn({banana, big}) {
	return (
    <button style={{
          backgroundColor:"tomato",
          color:"white",
          padding:"10px 20px",
          border: 0,
          borderRadius: 10,
      
      //big이 존재한다면, fontSize는 18 아니면 16 (if else) 
      //Save Changes : 18
      //Continue : 16
      fontSize: big ? 18: 16,
        }}>
      //하나만 적어도 두개의 버튼이 생성됨
      {banana}
     </button>
    );
}

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