[React Native] props

props란

 

properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성 값 혹은 상속받은 속성 값을 말한다.

부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다.

props의 변경이 필요할 경우 props를 설정 및 전달한 부모 컴포넌트에서 변경해야 한다.

 

1. 속성으로 props 전달하기

button component 글에서 만든 Mybutton 컴포넌트를 사용할 것이다.

App.js (부모)

<Mybutton1 title='TouchableOpacity Button!'/>

Mybutton1.js (자식)

import PropTypes from 'prop-types';

const Mybutton1 = (props) => {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: '#f56464',
        borderRadius: 10,
        margin: 10,
        padding: 10,
      }}
      onPress={() => alert('TouchableOpacity')}
    >
      <Text style={{ fontSize: 24, color: 'white' }}>{props.title}</Text>
    </TouchableOpacity>
  );
};

export default Mybutton1;

부모 :  title 속성 전달

자식 : 부모로부터 전달된 props를 함수의 parameter로 받아서 사용

 

2. 태그 사이 값으로 props 전달하기

App.js

<Mybutton2>TouchableHighlight Button!</Mybutton2>

Mybutton2.js

<Text style={{ fontSize: 24, color: 'white' }}>{props.children}</Text>

부모 : 컴포넌트 태그 사이에 전달 값 입력

자식 : props에 children으로 전달됨

 

만약 props에 children이 있다면 title 보다 우선시 되도록 작성한 코드

<Text>{props.children || props.title}</Text>

defaultProps

만약 아무것도 props로 전달되지 않은 경우 -> 빈 버튼이 나타남.

반드시 전달되어야 하는 중요한 값이 전달되지 않는 경우를 대비해 defaultProps로 지정 -> 빈 값이 나타나는 상황을 방지할 수 있다.

Mybutton3.js

//const Mybutton 함수 밖에서 
Mybutton3.defaultProps = {
	title: 'Button',
};

propTypes

컴포넌트에 props를 전달할 때 잘못된 타입을 전달하거나, 필수로 전달해야 하는 값을 전달하지 않는 문제를 방지하기 위한 것. props가 잘못 전달되었을 때 경고 메시지를 통해 알림.

라이브러리 추가

npm install prop-types

import PropTypes from 'prop-types';

propTypes를 이용하면 컴포넌트에서 전달받아야 하는 props의 타입과 필수 여부를 지정할 수 있다.

Mybutton1.propTypes = {
  title: PropTypes.string,
  name: PropTypes.string.isRequired,
};

title에 전달되어야 하는 값의 타입은 string이라고 지정.

필수 여부는 isRequired로 지정. (dafaultProps가 있으면 경고 메세지 나타나지 않음)

 

PropTypes에는 문자열이나 숫자 외에도 함수(func), 객체(object), 배열(array) 등의 다양한 타입을 지정할 수 있다. 

 

예) 부모에서 자식 컴포넌트로 함수를 전달해서 버튼 클릭 시 전달된 함수 호출하기

App.js

<Mybutton3 onPress={()=>alert('hello!')}/>

Mybutton3.js

export default function Mybutton3(props) {
  return (
    <Pressable
      style={{
        backgroundColor: '#095205',
        borderRadius: 10,
        margin: 10,
        padding: 10,
      }}
      onPress={() => props.onPress()}
      android_ripple={{ color: 'white' }}
    >
      <Text style={{ fontSize: 24, color: 'white' }}>Pressable Button!</Text>
    </Pressable>
  );
}

//onPress는 func이어야 하며, 필수이다.
Mybutton3.propTypes = {
  onPress: PropTypes.func.isRequired,
};