컴포넌트에 속성을 장착해줌. 리액트에서는 속성을 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/>
)
}
//{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/>
)
}