[React] Prop-types

😎 Prop types

propsは、親コンポーネントからサブコンポーネントにデータを転送する方法であり、親コンポーネントでpropsを使用すると、オブジェクトがサブコンポーネントのパラメータとして入力されます.
propsはまた、sting、number、boolean、functionなどの多くのコンテンツを含んでもよい.
PropTypesを使用して、異なるデータの転送によるエラーメッセージを回避するために、データのタイプ(type)を決定します.

😎 PropTypeタイプ

デフォルトでは、これらのタイプはPropTypeとして定義できます.

MyComponent.propTypes = {
  array: PropTypes.array,
  bigInt: PropTypes.bigint,
  bool: PropTypes.bool,
  func: PropTypes.func,
  number: PropTypes.number,
  object: PropTypes.object,
  string: PropTypes.string,
  
  // 필수로 모든 component에 값을 확인
  symbol: PropTypes.symbol.isRequired,
  
  // 배열에 포함된 '값' 중 하나라도 만족
  foods: PropTypes.oneOf(["ramen", "kimbab"]),

  // 배열에 포함된 '타입' 중 하나를 만족
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  
  // 특정 타입만을 포함하는 배열
  arrayOf: PropTypes.arrayOf(PropTypes.number),
  
  // 객체 내 모든 속성 값의 타입이 같은 경우
  objectOf: PropTypes.objectOf(PropTypes.number),
  
  // 객체의 속성값 타입을 정의
  // {color: 'red', weight: 123} // true
  info: PropTypes.shape({
    color: PropTypes.string,
    weight: PropTypes.number
  })
}

😎 PropTypeのインストール

npm i prop-types入力設定prop-types

上部に入力するimport PropTypes from 'prop-types'導入する.

😎 使用例

import ProptTypes form 'prop-types';

const Greeting({name, age}) {
  return(
    <h1>Hello, {name}!</h1>
    <h3>I'am {age} :P</h3>
  );
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

nameに数値が入力された場合、または他のタイプのデータが入力された場合、エラーメッセージはコンソールに出力され、エラーを確認します.
🚨 注意事項🚨
PropTypeを作成する場合は、大文字と小文字を区別します.
大文字が混同されているため、異なる大文字は使用できません.😢