React & React Native Props

Props: Properties의 줄임말, 부모 컴포넌트로부터 전달된 속성값 또는 상속받은 속성값

- 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 순 있지만 수정은 불가능 (수정을 원하면 부모 컴포넌트에서 수정)

import React from 'react';
import { Text, View } from 'react-native';
import MyButton from './components/MyButton';
const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ fontSize: 30, marginBottom: 10 }}>Props</Text>
      <MyButton title="Button" onPress={() => alert('props')} />
      <MyButton title="Button" onPress={() => alert('children')}>
        Children Props
      </MyButton>
      <MyButton onPress={() => alert('default')} />
    </View>
  );
};
export default App;

propTypes: 컴포넌트에 props를 전달할 때 잘못된 타입을 전달하거나, 필수로 전달해야 하는 값을 전달하지 않아서, 또는, 협업하는 다른 개발자가 잘못전달할 수 있음. 이런 상황에서 잘못된 props가 전달되었다는 것을 경고 메세지를 통해 알리는 방법

prop-types: https://github.com/facebook/prop-types  npm install prop-types

 

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects