[react-native] props 사용하기!

react-native 를 사용하게되면 가장 많이 보는것이 props와 state일것이다.

이번시간에는 props의 개념과 사용하는 방법에 대해 알아보자.

개념

props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기

만하고, 받아온 props 를 직접 수정 할 수 는 없다.

사용하는 방법

먼저 <Props.js> 파일과 <Test.js> 파일을 만든다

import React, { Component } from "react";

import {

StyleSheet,

Text,

View,

} from "react-native";

import Test from "./Test";

class Props extends Component {

render() {

return (

<View style={styles.container}>

<Test name="운동하는" />

<Test name="프로그래머" />

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: "center",

textAlign: "center",

alignItems: "center"

}

});

export default Props;

import React, { Component } from "react";

import {

Text,

View

} from "react-native";

class Test extends Component {

render() {

return (

<View >

<Text>{this.props.name}</Text>

</View>

);

}

}

export default Test;

코드를 보게되면

Test.js는  export하고 

Props.js 에서는  Test.js를  import 받아서 name 을 지정한것을 볼 수 있다. 

그렇게 되면 Test.js 에서는 따로 name 을 지정하지 않아도 값이 출력되는 것을 확인 할 수 있다.