1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. Props

Props

대부분의 컴포넌트는 다른 매개 변수와 함께 작성될 때 사용자 정의 할 수 있습니다. 이러한 생성 매개 변수를 ‘props’라고 합니다.

예를 들어, React Native 컴포넌트 중 이미지(Image)가 있습니다. 이미지를 만들 때 source라는 이름의 prop을 사용하여 이미지의 모양을 제어할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

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

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

{pic}은 변수 pic을 JSX에 포함시키기 위해 중괄호로 묶여 있습니다. JSX에서는 중괄호 안에 자바스크립트 표현식을 넣을 수 있습니다.

자신의 컴포넌트는 props를 사용할 수도 있습니다. 이렇게 하면 각각에 약간 다른 속성을 사용하여 앱의 여러 곳에서 사용되는 단일 컴포넌트를 만들 수 있습니다. 그냥 render 함수에서 this.props를 참조하십시오. 다음은 그 예입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

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

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

‘name’을 prop으로 사용하면 ‘Greeting’ 컴포넌트를 사용자 정의 할 수 있으므로 인사말 별로 해당 컴포넌트를 재사용할 수 있습니다. 이 예제는 JSX에서 ‘Greeting’ 컴포넌트도 사용합니다. 이는 내장 컴포넌트와 같습니다. 이 작업을 수행할 수 있는 능력이 React를 매우 멋지게 만듭니다. 사용자가 다른 UI 기본 설정을 사용하기를 원한다면 새로운 UI를 만들 수 있습니다.

여기에서 진행되는 다른 새로운 작업은 ‘View’ 컴포넌트입니다. ‘View’는 스타일 및 레이아웃을 제어하는 데 도움이 되는 다른 컴포넌트의 컨테이너로 유용합니다.

‘props’와 기본 ‘Text’, ‘Image’및 ‘View’ 컴포넌트를 사용하여 다양한 정적 화면을 만들 수 있습니다. 시간이 지남에 따라 앱을 변경하는 방법을 배우려면 State에 대해 알아야 합니다.

Was this article helpful to you? Yes No

How can we help?