[React Native 공식 Doc 가이드 #3] Props React Native

- 이 글은 React 공식 홈페이지 Docs https://facebook.github.io/react-native/ 에 기반하여 작성한 글입니다.
- Props
대부분의 Component 들은 생성시점에 Parameter를 다르게 넘겨줌에 따라서 Customizing 될 수 있다. 이러한 Paramter 들을 Props 라고 한다.
예를 들어보자. React Native component 중에 Image 라는 Component가 있다. image를 만들 때, 어떤 이미지가 보여지느냐를 결정할 때 source 라는 이름의 prop을 사용 한다.
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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}} />
);
}
}


export default class App extends Component {
render() {
return (
<Bananas />
);
}
}
{pic} - 이러한 중괄호는 JSX 문법안에서 javascript expression을 사용가능하도록 해준다. pic 는 javascript expression 이기 때문에 JSX 안에서 해당변수 참조를 위해 중괄호를 사용하였다.
만약 어떤 Component를 재사용 하고자 할 때 위와 같은 방식은 사용하기가 애매하다. 바나나가 아닌 다른 과일을 나타낼 때, 각 과일마다 Component를 제작해야 하기 때문이다. 보다 더 합리적이 방식은 사용하고자 하는 쪽에서 parameter 형태로 받고 그 내용을 출력해주는 공통의 Component를 제작하는 것이 더 나을것이다.
Hello, 문자열 다음에 이름을 출력해주는 Component를 만든다고 생각해보자. Rexxar, Jaina, Valeera 3명을 출력한다고 할 때 parameter 형태로 출력하지 않는다면 출력하려는 이름과 생성되는 Component의 개수 관계는 1:1이다. 하지만 그럴필요 없다. React Native에는 prop이라는 개념이 있다.
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}</Text>
</View>
);
}
}

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

prop의 name을 사용하여 Greeting Component를 커스터마이징 하였다. 이렇게 사용하면 이름이 달라진다고 하더라도 새로운 Component를 계속 생성하지 않고 Greeting Component를 재사용 할 수 있다.
위의 예제에서 JSX 안에서 Greeting Component를 built-in 형태로 사용한 것도 눈여겨 볼만하다. 만약 Greeting 3개의 Component가 아니라 다른 Component 요소가 추가된 UI의 set을 원하면 원하는 Component를 built-in 형태로 추가해서 구성하면 된다.
또 여기서 <View> Component 를 다른 Component 의 style과 layout 을 제어하기 위한 container 개념으로 사용한 것도 눈여겨 볼만하다.
props 와 기본적인 Text, Image 그리고 View component 를 조합하여 사용하면 고정된 화면에서 다양한 방법으로 사용할 수 있다.


덧글

댓글 입력 영역