//Signup.js
<Container >
<Image rounded />
<Container />
//Image.js
<Container >
{rounded && <PhotoButton onPress={함수}} />}
<Container />
Image.defaultProps = {
rounded : false,
}
prop-types
을 사용함.
Signup.js ----> Image.js
rounded
키 만 넘길 때rounded
는 default로false
이지만 키를 넘겨 받았으므로true
로 처리가 된다.console.log()
로 전달받은rounded
를 확인하거나 debugger로 break-point를 잡거나 둘 중 하나로 확인 가능하다. 허나, break-point로 상위 컴포넌트에서 키의 값은 잡히지가 않는다.
//Signup.js
<Container >
<Image />
<Container />
//Image.js
<Container >
<Image rounded />
<Container />
rounded
는 undefined
으로 출력될 것이다.
//예시 1.
//Signup.js
<Container >
<Button title="받아요~" />
<Container />
//Image.js
const Button = ({title}) => {
return (
<Container style={styles.ButtonContainer}>
<Button title={title}>
<Container />
)
}
//예시 2.
//Signup.js
<Container >
<Button title="받아요~" />
<Container />
//Image.js
const Button = (props) => {
return (
<Container style={styles.ButtonContainer}>
<Button title={props.title}>
<Container />
)
}
해당 예시가 틀려서 에러가 발생할 수도 있습니다...