PropTypes

PropTypes : 부모로부터 전달받은 prop의 데이터 type을 검사 ( 자료형 지정 ) 

- 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 PropTypes를 활용하는 것을 권장

- 타입스크립트 이용시에는 불 필요 

 

 

import PropTypes from "prop-types";

Food.PropTypes = { //PropTypes 이름 고정
    name: PropTypes.string.isRequired, //필수로 string, 아니면 에러
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number //필수는 아니지만 number or undefined
};

종류
1) 기본적으로 제공되는 타입들 

• array: 배열
• arrayOf: 특정 propType으로 이루어진 배열
• bool: true or false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드)
• instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass))
• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류

출처: https://snupi.tistory.com/145?category=0 [SNUPI]

2) 커스텀 타입 함수 작성

 

 

 

출처

https://snupi.tistory.com/145?category=0 

[React] Prop-Types 개념과 종류