참조문서

설치 및 사용법

사용법

import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(){
	return <></>
}

MyComponent.propTypes = {
  // props name : props types
  optionalArray: PropTypes.array, // 배열
  optionalBool: PropTypes.bool, // 불리언
  optionalFunc: PropTypes.func, // 함수
  optionalNumber: PropTypes.number, // 숫자
  optionalObject: PropTypes.object, // 객체
  optionalString: PropTypes.string, // 문자열
  ~~optionalBigInt: PropTypes.bigint, // BigInt~~
  ~~optionalSymbol: PropTypes.symbol, // 심볼~~

  // 렌더링 가능한 모든 것: 숫자, 문자열, 요소 또는 이러한 유형을 포함한 배열(또는 프래그먼트).
  // 자세한 내용은 [<https://reactjs.org/docs/rendering-elements.html>](<https://reactjs.org/docs/rendering-elements.html>)를 참조하세요.
  optionalNode: PropTypes.node, // 노드

  // React 요소 (예: <MyComponent />).
  optionalElement: PropTypes.element, // 요소

  // React 요소 유형 (예: MyComponent).
  // 함수, 문자열 또는 "요소와 유사한" 객체 (예: React.Fragment, Suspense 등)
  // 자세한 내용은 [<https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js>](<https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js>)를 참조하세요.
  optionalElementType: PropTypes.elementType, // 요소 유형

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

  // prop이 특정 값으로 제한되도록 설정하여 선택적 배열처럼 사용할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']), // 선택적인 배열 값 ('News' 또는 'Photos')

  // 여러 유형 중 하나일 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]), // 선택적으로 문자열, 숫자 또는 Message 인스턴스

  // 특정 유형의 요소로 구성된 배열
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // 숫자 유형의 배열

  // 특정 유형의 속성 값을 가진 객체
  optionalObjectOf: PropTypes.objectOf(PropTypes.number), // 숫자 유형의 속성 값을 가진 객체

  // 위의 어떤 유형이라도 `isRequired`와 연결하여 해당 prop이 제공되지 않을 경우 경고가 표시되도록 할 수 있습니다.

  // 특정 모양을 가진 객체
  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string, // 선택적인 문자열 속성
    requiredProperty: PropTypes.number.isRequired // 필수 숫자 속성
  }),

  // 추가 속성에 대한 경고가 있는 객체
  optionalObjectWithStrictShape: PropTypes.exact({
    optionalProperty: PropTypes.string, // 선택적인 문자열 속성
    requiredProperty: PropTypes.number.isRequired // 필수 숫자 속성
  }),

  requiredFunc: PropTypes.func.isRequired, // 필수 함수

  // 모든 데이터 유형의 값
  requiredAny: PropTypes.any.isRequired, // 필수 값 (어떠한 데이터 유형도 가능)
};

props default 값 객체로 관리하기

MyComponent.defaultProps = {
  onClick: () => {},
  variant: 'primary',
  disabled: false,
};