[React] Prop-types

😎 Prop types

props는 부모 컴포넌트로 부터 자식 컴포넌트에게 데이터를 전송하는 방식으로, 부모에 props를 사용하면 자식 component의 인자로 object가 들어가게 됩니다.
그리고 props에는 sting, number, boolean, function 같은 다양한 것들을 담을 수 있습니다.

이 같이 다양한 데이터들을 전송하기 때문에 잘못된 정보가 입력이 되었을 때 일어나는 오류를 방지하기 위해 PropTypes를 사용하여 데이터의 타입(type)을 확인합니다.

😎 PropTypes 종류

기본적으로 PropTypes로 정의할 수 있는 타입들입니다.

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
  })
}

😎 PropTypes 설치

• 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에 숫자가 입력되었거나, 다른 타입의 데이터가 들어간다면 에러 메시지가 콘솔에 출력되어 오류를 확인 할 수 있다.

🚨 주의 사항 🚨
PropTypes 작성 시 대문자를 구분해서 사용해야합니다.
대문자를 헷갈려서 다르게 작성 시 작동하지 않습니다. 😢