[React Native] 2-2 Props

[리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다.

---

Props는 properties를 줄인말로 컴포넌트의 속성을 의미합니다.

 

Props를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣어줄 수 있습니다.

 

Greeting 컴포넌트에 name 이라는 Props를 추가하겠습니다.

import React from "react";
import {View,Text} from "react-native";

function Greeting(props) {
  return(
    <View>
      <Text>안녕하세요 {props.name}!!</Text>
    </View>
  )
}

export default Greeting;

함수에서 props라는 파라미터를 설정한뒤, 기존 '함수 컴포넌트'가 있던 부분을 {props.name}으로 감싸주었습니다

 

JSX에서 자바스크립트의 표현식을 보여줄 때는 중괄호로 감싸서 작성합니다.

 

이제 App컴포넌트를 수정해 주세요

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import Greeting from './components/Greeting';

const App = () => {
  return (
    <SafeAreaView>
      <Greeting name={'Props'} />
    </SafeAreaView>
  );
};

export default App;

이렇게 뜬다면 성공입니다.

---

defalutProp

만약 컴포넌트에 pros를 지정하지 않았을 때 기본값을 설정하고 싶다면 사용하면 됩니다.

 

App 컴포넌트에서 Greeting 의 name을 지우세요.

 

그리고 Greeting 컴포넌트를 열어 하단에 다음 코드를 작성해주세요.

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

function Greeting(props) {
  return (
    <View>
      <Text>안녕하세요 {props.name}!!</Text>
    </View>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

그럼 name을 설정해주지 않았지만 defaultProps로 인해 기본적으로 생성됩니다.