[React] 리액트 PropTypes 사용하기

🎯 리액트 PropTypes 사용하기

• 컴포넌트의 props에 타입 검사를 하려면 propTypes을 사용해야 한다.

 

📝 PropTypes 설치 및 import

npm i prop-types

import PropTypes from "prop-types";

import PropTypes from 'prop-types';

const Greeting = () => {
    return (
      h1>Hello, {this.props.name}</h1>
   );
 }
}

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

• prop에 유효하지 않은 값이 전달되었을 때, 경고문이 뜬다.

 

📝 기본 타입

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

 

📝 필수 값 :: isRequired

requiredFunc: PropTypes.func.isRequired,

// 모든 데이터 타입이 가능한 필수값
requiredAny: PropTypes.any.isRequired,

 

📝 복잡한 배열이나 객체

import PropTypes from 'prop-types';

const Greeting = ({ data }) => {
  return (
    {data.map(({ name, age }) => {
      <span key={name}>Hello, My name is {name}, I'm {age} years old.<span/>
    }};
  );
}

Greeting.propTypes = {
   data: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired
    }),
  ).isRequired
};

 

📝 그 외

// 랜더링 될 수 있는 것들은 다음과 같습니다.
// 숫자(numbers), 문자(strings), 엘리먼트(elements), 또는 이러한 타입들(types)을 포함하고 있는 배열(array) (혹은 배열의 fragment)
optionalNode: PropTypes.node,

// React 엘리먼트.
optionalElement: PropTypes.element,

// React 엘리먼트 타입 (ie. MyComponent)
optionalElementType: PropTypes.elementType,

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

// 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),

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

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

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

// 특정 형태를 갖는 객체
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),

// 추가 프로퍼티에 대한 경고가 있는 객체
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),

 

🏷 요약

• propTypes의 isRequired 사용 O -> defaultProps 작성 X
• propTypes의 isRequired 사용 X -> defaultProps 작성 O

 

📌 참고

• prop-types
• PropTypes와 함께 하는 타입 검사 - React