React Native -Props-

Props 

리액트 네이티브를 아직 많이 다루어 보지 않았지만 형태를 보다보면 extends Component(상속) 를 해서 사용자 정의 Component를 만들 수있는 것으로 보인다.   

Props 은 Property의 약자로 보이나 C#의 Property와는 비슷한듯 하면서 차이가 있는 것 같다 이해가 되면 그 부분은 따로 남기자. 

아래 공식문서에 있는 코드를 보면 

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}}/>

    );

  }

}

이것만 보고 어떤 느낌인지 알겠는가?? 먼저 만들어진 공식문서에는 parameter 란 표현이 있다 이런 인자값의 내용이 바뀌는 것에 대응하는 parameter 부분이 props 이 된다. (리액트 네이티브 제작 원론 이라는 책을 보면 정적인 Component를 동적으로 변화시키기 위해 props을 사용할 수 있는 것으로 표현하고 있다. 

React Native에서 Image 태그만 보고 HTML의 img 태그를 떠올리기 쉽다 물론 React의 개념으로는 Image - img 가 대응하고 동일한 웹페이지를 보여주는 것은 맞지만 import { AppRegistry, Image } from 'react-native'; 구문을 보면 Image는 react-native의 Component 이다. 

즉 Component 라는 생각을 가지고 접근하면 Image라는 Componenet는 source, style이라는 속성을 가지고 있다고 볼 수 있다. 

위의 코드에서도 source={pic} 로 사용되고 중괄호 속의 {pic} 의 부분은 동적으로 들어갈 수 있다. 

여기까지의 내용으로 정리하자면 props 이라는 것은 하나의 특징을 가지고 있다. 

Componet안에 사용자 정의 속성을 만들어서 해당 부분을 동적으로 사용(바인딩) 할 수 있다. 

공식문서의 예를 하나 더 보자 점점 C#의 속성이랑 비슷한 느낌이 들기 시작한다 

import React, { Component } from 'react';

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

class Greeting extends Component {

  render() {

    return (

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

    );

  }

}

export default class LotsOfGreetings extends Component {

  render() {

    return (

      <View style={{alignItems: 'center'}}>

        <Greeting name='Rexxar' />

        <Greeting name='Jaina' />

        <Greeting name='Valeera' />

      </View>

    );

  }

}

Greeting 이라는 사용자 정의 Componenet를 만들었다. 그리고 default Component에서 불러냈으며 name이라는 Props을 각각의 Componet에서 사용하고 있다. View Componet는 HTML의 div와 대응하기 때문에 일정 영역에(Center Style 속성을 사용 중이다) 단순히 텍스트로 이름들이 출력된다. 

여기서는 this의 props에 접근하고 그것의 이름은 name으로 정했다 즉 Greeting 이라는 Componenet를 사용할 때 name 속성에 값을 넣으면(지금은 문자열) 해당 Component가 출력될 때 변경되는 값을 동적으로 보여준다 즉 Component를 동적으로 재사용할 수 있게 된다는 것이다. 

공식문서에서 이해된 내용을 정리하면 

1. Component 안에 사용자 정의 속성을 만들 수 있다. 

2. Parameter 라고 설명한 이유를보면 Component를 사용할 때 해당 속성에 값을 실어 보낼 수 있다. Componet != (일반적인)Class 로 보이지는 않는다. 다만 class extends Componet 는 XML 처럼 component를 사용할 수 있고 속성을 매개변수로 값을 실어서 보낼 수 있다.  

name을 props으로 사용했고 Greeting 이라는 Componenet를 커스터마이징해서 사용 했다. 이 Component는 Class 처럼 재사용이 가능하고 필요에 따라 수정하거나 값을 바꺼서 동적인 화면을 구성할 수 있다. 

마지막으로 한줄로 정리 

Props 는 react-native의 Componet를 사용자 정의로 해서 재사용가능하게 만들 수 있고 해당 Componenet를 사용할 때 속성을 동적인 화면으로 보일 수 있게 해준다.