[React Native] 리액트 네이티브(react native) Props

Props란?

properties의 약어이며, 컴포넌트를 생성할 때, 파라미터를 받아서 생성하는 경우가 많은데, 이렇게 받아온 데이터를 사용하는 것을 말한다. 변동되지 않는 데이터를 다룰 때 사용한다. 부모에 의해 설정되며, 컴포넌트가 살아있는 동안만 유지된다.

리액트 네이티브 제공 컴포넌트

기본 리액트 네이티브 컴포넌트인 image로 예시를 들어보겠다.

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

<image source={pic} ... > 에서 source가 prop 이름이다. {pic}부분은 변수 pic을 JSX 형식으로 써 준 것이다.

커스터마이징한 컴포넌트

리액트 네이티브에서 기본적으로 제공하는 컴포넌트 말고, 직접 컴포넌트를 만들 때도 prop를 사용할 수 있다. render 함수 안에 this.props로 사용할 수 있다.

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

만들어준 Greeting 컴포넌트를 밑의 LotsOfGreetings 컴포넌트에서 사용하고 있다. LotsOfGreetings의 render안에 Greeting 컴포넌트가 3번 사용되고 있다. 각각 Greeting 컴포넌트는 'name' 이라는 prop를 가지고 있다. 이 prop 값을 Greeting 컴포넌트에서 사용하기 위하여, {this.props.name}을 사용하고 있는 것이다.

출력 결과는 아래와 같다. 각각 Greeting의 prop 값에 따라 출력 값이 달라진다.