[React] Prop-Types 개념과 종류

우리는 props를 이용할 때 prop-types을 이용하여 자료형을 지정해 오류를 줄일 수 있다.

전체 애플리케이션의 타입 확인을 위하여 Flow 또는 TypeScript 와 같은 JavaScript 도구(Extensions)를 사용하지 않더라도 React는 내장된 타입 확인 기능들을 가지고 있다.

컴포넌트의 props에 타입 확인을 하려면 다음과 같이 특별한 프로퍼티인 propTypes를 선언할 수 있다.

 

모듈 설치는 다음과 같이 npm 혹은 yarn으로 설치하고 불러온다

> npm i prop-types
> npm install (안 될 시)

 

import PropTypes from "prop-types";

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

 

isRequired로 필수 지정을 할 수 있고,

PropType의 종류에는 다음과 같다

• 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: 아무 종류