컴포넌트 속성 - props, defaultProps

Props

Props는 properties를 줄인 말로 컴포넌트의 속성을 의미한다. Porps를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣을 수 있다.

이 전 글에서 Hello 컴포넌트를 만들어 봤는데 여기에 Props를 적용해보겠다.

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

function add(a, b) {
  return a + b;
}

function hello(props) {
  return (
    <View>
      <Text>Hello World</Text>
      <Text>name : {props.name}</Text>
      <Text>add : {add(1, 1)}</Text>
    </View>
  );
}

export default hello;

위 코드 처럼 전달받은 props를 출력할때는 괄호({, })를 사용하면되는데 함수도 괄호안에 표현이 가능하다.

 

이제 Hello 컴포넌트를 사용한 App 컴포넌트에서 속성으로 name값을 전달해준다.

import React from 'react';
import {SafeAreaView} from 'react-native';
import Hello from './component/Hello';

const App = () => {
  return (
    <SafeAreaView>
      <Hello name="devbeekei" />
    </SafeAreaView>
  );
};

export default App;

defaultProps

defaultProps는 컴포넌트에 Props를 지정해주지 않았을 때 기본값을 설정해준다.

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

function add(a, b) {
  return a + b;
}

function hello(props) {
  return (
    <View>
      <Text>Hello World</Text>
      <Text>name : {props.name}</Text>
      <Text>add : {add(1, 1)}</Text>
    </View>
  );
}

hello.defaultProps = {
  name: 'default name',
};

export default hello;

위처럼 hello 컴포넌트에 defaultProps를 설정해주고 App 컴포넌트에 name 속성을 제거해보면 아래와 같이 기본값으로 출력된 것을 확인할 수 있다.