프로그래밍(Programming)/리액트 네이티브(React Native)
react-native(리액트 네이티브) props 정의 및 전달
SuperKid
2018. 10. 29. 17:10
----------------------------------------------------------------------------
Header component(자식) 에 default Props 값 지정
(부모에게 props를 받으면 override 됨.)
export default class Header extends Component {
static defaultProps = {
title: 'Default Header'
}
render() {
return (
<View >
<Text style={styles.header}>
{this.props.title.toUpperCase()}
</Text>
</View>
);
}
}
-------------------------------------------------------------------
App component(부모) 에서 props 를 정의해서 자식 component로 전달
( title={this.state.xxx} 구문을 사용하면 부모의 state 값을 자식의 props로 전달 가능)
1. spread 문법을 사용해서 props 전체를 전달
render() {
const props = {
title: 'My Title',
size: 20,
};
return <Header {...props} />;
}
* above code is same as below
render() {
return <Header title="My Title" size={20} />;
}
2. destructuring 할당 문법을 사용해서 props 정의 및 전달
render() {
const { title, size, ...rest } = this.props;
return (
<View>
<Text style={[styles.header, { fontSize: size }]} {...rest}>
{title.toUpperCase()}
</Text>
</View>
);
}
-------------------------------------------------------------------------