[React Native] Props는 어떻게 사용할까?

props는 state와 마찬가지로 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. 하지만 state와 다른 점은 props는 정적인 데이터를 다룰 때 주로 사용된다는 점이다.

 

props에 대해 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것이다.

 

깔끔한 기본 화면 두둥

오늘 기본 화면은 깔끔하게 아무것도 안했다. 차라리 색깔을 안넣는게 더 깔끔하고 잘된 것 같다.

 

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
 
export default class App extends Component {
  render() {
    return (
      <View style = {styles.control}>
        <LoadScene text='알라이' />
        <LoadScene text='무라이' />
        <LoadScene text='끝나라이' />
      </View>
    )
  }
}
 
class LoadScene extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.mainText}>안녕하세요 {this.props.text} </Text>
      </View>
    )
  }
}
 

오늘의 코드는 정말 간단하다. App클래스는 LoadScene클래스에 props를 전달해주고 LoadScene은 전달받은 props를 화면에 출력해주는 역할을 한다.

 

여기서 전달하는 props 데이터 'text' 그리고 전달받은 props 데이터 'this.props.text'에서 text 글자가 서로 다르다면 화면은 출력되지 않는다. 안될 것 같기는 했는데 궁금해서 해봤다.

 

const styles = StyleSheet.create({
  control: {
    flex: 1,
    justifyContent: 'center'
  },
  container: {
    alignItems: 'center',
  },
  mainText: {
    fontSize: 20,
  }
})
 

스타일 코드는 언제나 그렇듯 설명하지 않겠다아ㅏ아아아

 

이렇게 오늘은 기본화면이 곧 결과화면이다. 이 예제는 react native 공식 홈페이지에 있는 props 예제이다. 더 자세한 내용은 공식 홈페이지에서 확인하면 된다. 그리고 타입스크립트에서는 text와 this.props.text에 에러가 뜨는데 실행하는데는 문제가 없다. 타입스크립트라서 에러가 나는것 같은데 이유는 아직 잘 몰라서 모르겠다. 구럼 2만