react-native(리액트 네이티브) props 정의 및 전달

----------------------------------------------------------------------------

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>

);

}

-------------------------------------------------------------------------