[React Native] props 예시

아래 예시에서 보듯 상위 Component에서 하위 Component를 render할때 props를 줄 수 있다.

 

<User style={styles.user}
                      title={"MAN~~"}
                      desc={"SOHARD~~"}
                />

이를 통해 전달받은 값으로 하위 Component에서 아래와 같이 props를 사용할 수 있다.

 

<Text style={userStyles.userTitle}>
                    {this.props.title}
                </Text>
                <Text style={userStyles.userDesc}>
                    {this.props.desc}
                </Text>

 

샘플 예시

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';


class User extends Component{

    constructor(){
        super();
    }

    render(){

        return(
            <View style={userStyles.userContainer}>
                <Text style={userStyles.userTitle}>
                    {this.props.title}
                </Text>
                <Text style={userStyles.userDesc}>
                    {this.props.desc}
                </Text>
            </View>
        );
    }
}

export default class App extends Component {


    render() {

        return (
            <View style={styles.container}>
                <User style={styles.user}
                      title={"MAN~~"}
                      desc={"SOHARD~~"}
                />
            </View>
        );
    }
}



const userStyles = StyleSheet.create({
    userContainer: {
        flex: 1,
        flexDirection: 'column',
        padding: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'yellow',
    },
    userTitle:{
        flex:1
    },
    userDesc:{
        flex:1
    }
});



const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        padding: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'gray',
    },
    user:{
        flex:1
    }
});