ReactPropTypes는 개발자가 프로젝트를 구축할 때 사용할 수 있는 강력한 도구다.이것은 구성 요소를 입력으로 받는 데이터로 검증하는 데 사용할 수 있습니다.기대에 부합되는지 확인하세요.
PropTypes 모듈에는 Prop로 전송되는 데이터 유형을 확인하는 함수 세트가 포함되어 있습니다.검증에 실패했을 때 오류를 되돌려줍니다.가장 흔히 볼 수 있는 용례는 테스트에 필요한 도구가 어린이 부품에 제공되는지 여부이다.

도구 유형의 작업 원리

PropTypes는 구성 요소가 올바른 유형을 수신하는지 확인하는 React의 내부 메커니즘입니다.React 구성 요소는 propTypes라는 속성 설정 유형 검사를 사용합니다.이것은 기능성 구성 요소와 클래스 기반 구성 요소에 대해 진행할 수 있다.

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

const Person = ({ name, age }) => {
  return (
    <article>
      <h1>{name}</h1>
      <p>{age}</p>
    </article>
  );
};

Person.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
};

export default Person;

검사 가능한 유형

지원되는 유형에 대해서는PropTypes 패키지는 미리 정의된 검증 기능을 제공합니다.그것들은 대다수의 흔한 유형을 포괄한다.더 어려운 검증에 대해 사용자 정의 검증 프로그램을 정의할 수 있습니다.

기본 유형

다음은 기본 데이터 유형의 인증서입니다.

PropTypes.any - 아이템은 무엇이든 가능

PropTypes.bool - 아이템 필요true 또는false

PropTypes.number - 아이템은 모든 아이템이어야 합니다number

PropTypes.string - 아이템은 모든 아이템이어야 합니다string

PropTypes.func - 아이템은 하나의 함수 필요

PropTypes.array - 아이템 필요Array

PropTypes.object - 아이템 필요Object

PropTypes.symbol - 아이템 필요Symbol

Person.propTypes = {
  hobby: PropTypes.any,
  male: PropTypes.bool,
  age: PropTypes.number,
  name: PropTypes.string,
  secretTalent: PropTypes.func,
  friends: PropTypes.array,
  wallet: PropTypes.object,
  skill: PropTypes.symbol,
};

렌더링 가능 유형

렌더링 가능 유형은 prop을 React에서 렌더링할 수 있는지 확인합니다.우리는 prop가React 요소(즉<MyComponent />)인지 아니면 기타 모든 요소(즉 문자열, 숫자 등)인지 지정할 수 있다.

PropTypes.element - 반응 소자

PropTypes.node - 렌더링할 수 있는 모든 것.숫자, 문자열, 요소 또는 배열

Blog.propTypes = {
  blogTitle: PropTypes.element,
  blogBody: PropTypes.node,
};

인스턴스 유형

실례 검증기는 prop가 주어진 종류의 실례인지 검사하는 데 사용할 수 있다.이것은 prop 이 구성 요소의 실례인지 확인하는 데 매우 유용하지만, 클래스 기반 구성 요소에만 적용됩니다.

컬렉션 유형

우리가 수조의 내용을 검증해야 할 때, 집합 검증기는 쓸모가 있다.이것은 우리로 하여금 수조나 대상의 내용을 검사하고 검증할 수 있게 한다.

PropTypes.arrayOf - 원소를 정의하는 수조

PropTypes.shape - 정의된 속성을 포함하는 객체(추가 속성 포함)

PropTypes.exact - 정의된 속성만 포함하는 객체(다른 속성은 포함할 수 없음)

Person.propTypes = {
  friends: PropTypes.arrayOf(PropTypes.string),
  father: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  dog: PropTypes.exact({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
};

필수 유형

기본적으로 모든 props는 선택 사항입니다.어떤 아이템이 시종일관 통과할 수 있도록 하세요.우리는 isRequired 검증기를 사용하여 필요에 따라 그것을 표시할 수 있다.

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  friends: PropTypes.arrayOf(PropTypes.string),
};

사용자 정의 인증서

어떤 경우, 우리는 사용자 정의 검증기를 작성해야 한다.좋은 예는passedprop가 유효한 전자 우편 주소인지 확인하는 것이다.
사용자 정의 검증기를 함수로 정의할 수 있습니다. 3개의 인자를 받아들이고 검증에 실패할 때 되돌아옵니다. Error

Person.propTypes = {
  email: (props, propName, componentName) => {
    // Regex to test if email is correct
    if (!/^[^\s@]+@[^\s@]+$/.test(props[propName])) {
      return new Error(
        `Invalid prop "${propsName}" supplied to "${componentName}"`
      );
    }
  },
};

기본값 제공

구성 요소props에 대한 기본값을 정의하는 것은 간단합니다.우리는 그것들을 defaultProps 속성에 분배함으로써 이 점을 실현할 수 있다.만약 우리가 아이템 설정을 잊어버리면 아래의 예시englishSpeaker를 true로 설정합니다.

Person.propTypes = {
  englishSpeaker: PropTypes.bool,
};

Person.defaultProps = {
  englishSpeaker: true,
};

오류 확인 방법

React의 PropTypes는 런타임에 유형이 올바른지 확인합니다.이것은 형식이 정확한지 확인하기 위해 프로그램을 실행해야 한다는 것을 의미한다.또한 렌더링된 어셈블리의 유형만 확인합니다.만약 어떤 구성 요소가 받은 유형이 정확하지 않다면.우리는 컨트롤러에서 경고를 볼 것이다.

이것은 시간을 소모하는 임무이기 때문이다.그것은 개발 모드에서만 지원된다.따라서 개발할 때 컨트롤러를 꼼꼼히 살펴보세요.생산 중에 경고를 보지 않으니까!

결론

PropTypes는 구성 요소가 정확한 도구를 받았는지 확인하기 위해 우리에게 대량의 기능을 제공했다.이것은 React 프로젝트에 유형 검사를 신속하게 도입하는 좋은 방법이다.응용 프로그램을 더욱 안정적으로 하다.그러나 이것은 대형 프로젝트의 이상적인 선택이 아니다.
프로젝트가 확대됨에 따라 컨트롤러의 경고를 무시하기 쉽다.시스템에 불필요한 오류를 도입합니다.이러한 장면에서 우리는 Flow나Typescript 등 도구를 사용하여 정적 유형 검사를 하는 것을 고려해야 한다.