[React/React-Native] Proptypes 사용목적과 사용방법

우선 React-Native를 쓰려면 기본적으로 React를 알아야한다.

React-Native로 날씨앱 만들기 강의를 수강중인데, import되는 라이브러리중에 처음보는 라이브러리인 PropType이 있어 알아보았다.

목적

 

- 부모로부터 전달받은 컴포넌트의 props 타입 확인을 하기 위해 사용한다.

- 자식 컴포넌트에 명시해놓은 데이터 타입과, 부모로부터 내려받은 타입이 일치하지 않으면 경고문이 뜬다.

 

사용법

 

npm이나 yarn으로 설치부터 한다.

yarn add proptypes

 

prop-types 라이브러리해서 import 하여 사용할 수 있다.

import PropTypes from 'prop-types';

 

- PropTypes는 전달받은 데이터의 유효성을 검증하기 위해 사용된다.

- prop에 유효하지 않는 값이 전달되었을 때 경고문이 Javascript 콘솔에 나타난다.

- propTypes는 개발모드에서만 확인 가능

 

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

 

PropTypes로 정의가능한 타입

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // prop가 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  
  //News 나 Photos가 아니면 경고 => 배열에 포함된 값 중에 하나 만족
  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다. => func이며 필수값으로 안내려올 때 경고!
  requiredFunc: PropTypes.func.isRequired,
  
   // 모든 데이터 타입이 가능한 필수값
  requiredAny: PropTypes.any.isRequired,
  
  // 리액트 엘리먼트
  // <div>123</div> , <Component />
  menu: PropTypes.element,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 특정 타입의 프로퍼티 값들을 갖는 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

    
  };

 

 

- defaultProps를 통해 초기 Prop값을 정의할 수도  있음

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

 

 

함수형

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

 

 

더 많은 내용은 아래 공식 문서 확인

PropTypes와 함께 하는 타입 확인 – React