React Native 공부 5 - Props

1. 대부분의 components들은 생성될 때 각각 다른 매개변수들로 unique하게 구성됩니다. (구체적으로 표현되기 때문에 각각의 components들이 unique하다고 생각하시면 될 것 같습니다.) 

예를 들면, 간단한 React Native component는 Image인데, image를 생성할 때, source라는 prop(속성)을 사용하여 이미지 보이기 및 감추기를 제어할 수 있습니다. 

아래 코드에서 {pic} 이라는 괄호를 주목해보면 - 이 괄호(block영역)는 변수 pic을 JSX로 포함시킵니다. 어떤 JavaScript 표현이라도 JSX 내 괄호{ } 안에 표현할 수 있습니다.

import React, { Component } from 'react';

import { AppRegistry, 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}}/>

    );

  }

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => Bananas);

2. 각각의 components들은 props또한 사용할 수 있습니다. 이를 통하여 하나의 컴포넌트로 약간의 속성변화만으로 어플 내에서 다양하게 사용할 수 있습니다. render function 내에서 this.props로 접근 할 수 있다.

다음은, Greeting component를 구현하기 위하여 name props를 사용한 예제이다. 

View compoenet를 보면, View는 style과 layout을 제어하기 위해 다른 객체들의 container로도 작동한다.

props와 basic Text, Image, View components들로 screen을 제어할 수 있다.

 

import React, { Component } from 'react';

import { AppRegistry, 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'}}>

        <Greeting name='Rexxar' />

        <Greeting name='Jaina' />

        <Greeting name='Valeera' />

      </View>

    );

  }

}

// skip this line if using Create React Native App

AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);