정중식의 개발공부로그

react,next 01. prop-types

10 Jul 2020 | react next

prop-types

prop-types란?

npm자료.. npm i prop-types

  • 타입의 유형을 검사한다.

  • 컴포넌트 부모로부터 올바른 자료형(타입)을 받았는지 검사해주는 기능이다.

import PropTypes from "prop-types";

AppLayout.propTypes = {
  children: PropTypes.node,
};

사용

import React from "react";
import Head from "next/head";
import PropTypes from "prop-types";
import AppLayout from "../components/AppLayout";

const NodeBird = ({ Component }) => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.1/antd.css"
        />
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </>
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType,
};

export default NodeBird;

  • children에 어떤 유형이 왔으면 하는지 propTypes ={} 로 적어준다.

  • 타입유형에 어긋나게 사용시, 화면 렌더링은 잘 되나 콘솔에 에러가 나온다.

타입 유형들

타입유형들은 prop-types npm으로 가면 적혀습니다.
한글로 설명을 번역시켜 긁어왔습니다.

MyComponent.propTypes = {
   //  prop이 특정 JS 프리미티브임을 선언 할 수 있습니다. 기본적으로
  //  모두 선택 사항입니다
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  //  렌더링 할 수있는 것 : 숫자, 문자열, 요소 또는 배열
  //  이러한 유형을 포함하는 (또는 조각)
  optionalNode: PropTypes.node,

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

  //  React 요소 유형 (예 : MyComponent).
  optionalElementType: PropTypes.elementType,

  //  prop이 클래스의 인스턴스라고 선언 할 수도 있습니다. 이것은 사용
  //  JS의 instanceof 연산자.
  optionalMessage: PropTypes.instanceOf(Message),

  //  치료를 통해 소품이 특정 값으로 제한되도록 할 수 있습니다
  //  열거 형입니다.
  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),

  //  위의 내용을`isRequired`와 연결하여 경고를 확인할 수 있습니다.
  //  소품이 제공되지 않으면 표시됩니다.

  //  특정 모양을 취하는 객체
  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,

  //  사용자 지정 유효성 검사기를 지정할 수도 있습니다. 오류를 반환해야합니다
  //  유효성 검사에 실패한 경우 이의 제기 `console.warn`하거나 던지지 마십시오.
  //  `oneOfType`에서는 작동하지 않습니다.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  //  `arrayOf`와`objectOf`에 커스텀 유효성 검사기를 제공 할 수도 있습니다.
  //  유효성 검사에 실패하면 Error 개체를 반환해야합니다. 유효성 검사기
  //  배열 또는 객체의 각 키에 대해 호출됩니다. 처음 두
  //  유효성 검사기의 인수는 배열 또는 객체 자체이며
  //  현재 아이템의 키.
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

Related Posts