React props 및 유사한 객체에 대한 런타임 유형 검사.
prop-type을 사용하여 구성 요소에 전달된 속성의 의도된 유형을 문서화할 수 있습니다. React(및 잠재적으로 다른 라이브러리 - 아래 checkPropTypes() 참조 참조)는 해당 정의에 대해 구성 요소에 전달된 prop을 확인하고 일치하지 않으면 개발 중에 경고합니다.
npm install --save prop-types import PropTypes from 'prop-types' ; // ES6
var PropTypes = require ( 'prop-types' ) ; // ES5 with npm 애플리케이션에서 prop-types 제외하고 window.PropTypes 를 통해 전역적으로 사용하려는 경우 prop-types 패키지는 다음 CDN에서 호스팅되는 단일 파일 배포를 제공합니다.
<!-- development version -->
< script src =" https://unpkg.com/[email protected]/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://unpkg.com/[email protected]/prop-types.min.js " > </ script > <!-- development version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js " > </ script >
<!-- production version -->
< script src =" https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js " > </ script > 특정 버전의 prop-types 로드하려면 15.6.0 버전 번호로 바꾸세요.
PropTypes는 원래 React 핵심 모듈의 일부로 노출되었으며 일반적으로 React 구성 요소와 함께 사용됩니다. 다음은 제공된 다양한 유효성 검사기를 문서화하는 React 구성 요소와 함께 PropTypes를 사용하는 예입니다.
import React from 'react' ;
import PropTypes from 'prop-types' ;
class MyComponent extends React . Component {
render ( ) {
// ... do things with the props
}
}
MyComponent . propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray : PropTypes . array ,
optionalBigInt : PropTypes . bigint ,
optionalBool : PropTypes . bool ,
optionalFunc : PropTypes . func ,
optionalNumber : PropTypes . number ,
optionalObject : PropTypes . object ,
optionalString : PropTypes . string ,
optionalSymbol : PropTypes . symbol ,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
// see https://reactjs.org/docs/rendering-elements.html for more info
optionalNode : PropTypes . node ,
// A React element (ie. <MyComponent />).
optionalElement : PropTypes . element ,
// A React element type (eg. MyComponent).
// a function, string, or "element-like" object (eg. React.Fragment, Suspense, etc.)
// see https://github.com/facebook/react/blob/HEAD/packages/shared/isValidElementType.js
optionalElementType : PropTypes . elementType ,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage : PropTypes . instanceOf ( Message ) ,
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum : PropTypes . oneOf ( [ 'News' , 'Photos' ] ) ,
// An object that could be one of many types
optionalUnion : PropTypes . oneOfType ( [
PropTypes . string ,
PropTypes . number ,
PropTypes . instanceOf ( Message )
] ) ,
// An array of a certain type
optionalArrayOf : PropTypes . arrayOf ( PropTypes . number ) ,
// An object with property values of a certain type
optionalObjectOf : PropTypes . objectOf ( PropTypes . number ) ,
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
// An object taking on a particular shape
optionalObjectWithShape : PropTypes . shape ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
// An object with warnings on extra properties
optionalObjectWithStrictShape : PropTypes . exact ( {
optionalProperty : PropTypes . string ,
requiredProperty : PropTypes . number . isRequired
} ) ,
requiredFunc : PropTypes . func . isRequired ,
// A value of any data type
requiredAny : PropTypes . any . isRequired ,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp : function ( props , propName , componentName ) {
if ( ! / matchme / . test ( props [ propName ] ) ) {
return new Error (
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
) ;
}
} ,
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
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.'
) ;
}
} )
} ;자세한 내용은 React 문서를 참조하세요.
React.PropTypes에서 prop-types 로 마이그레이션하는 방법에 대한 자세한 내용은 React.PropTypes 에서 마이그레이션을 확인하세요.
이 블로그 게시물에는 자동으로 변환을 수행하는 codemod 스크립트가 언급되어 있습니다 .
아래에도 중요한 참고 사항이 있습니다.
앱의 경우 캐럿 범위를 사용하여 dependencies 에 두는 것이 좋습니다. 예를 들어:
"dependencies" : {
"prop-types" : "^15.5.7"
} 라이브러리의 경우 dependencies 을 유지하는 것이 좋습니다 .
"dependencies" : {
"prop-types" : "^15.5.7"
} ,
"peerDependencies" : {
"react" : "^15.5.0"
}참고: 15.5.7 이전 버전에는 알려진 문제가 있으므로 최소 버전으로 사용하는 것이 좋습니다.
버전 범위가 캐럿( ^ )을 사용하므로 npm이 패키지를 효율적으로 중복 제거할 수 있을 만큼 충분히 넓은지 확인하세요.
구성 요소의 UMD 번들의 경우 빌드에 PropTypes 포함 하지 않는지 확인하세요. 일반적으로 이는 React에서와 마찬가지로 외부로 표시하여 수행됩니다(구체적인 내용은 번들러에 따라 다름).
이 패키지는 React 0.14.9 와 호환됩니다. 0.14.8(2016년 3월 출시)과 비교하면 0.14.9에는 다른 변경 사항이 없으므로 어렵지 않은 업그레이드가 될 것입니다.
# ATTENTION: Only run this if you still use React 0.14!
npm install --save react@^0.14.9 react-dom@^0.14.9이 패키지는 React 15.3.0 이상과 호환됩니다.
npm install --save react@^15.3.0 react-dom@^15.3.0
개발자가 잘못한 것이 없는데도 아래 메시지와 함께 경고를 출력합니다. 불행히도 React 0.14를 사용하는 경우 React를 15.3.0 이상으로 업데이트하거나 0.14.9로 업데이트하는 것 외에는 이에 대한 해결책이 없습니다.
React.PropTypes 와의 차이점: 유효성 검사기 함수를 호출하지 마세요 우선, 어떤 버전의 React를 사용하고 있나요 ? prop-types 패키지를 사용하도록 구성 요소 라이브러리가 업데이트되었지만 React 버전이 호환되지 않기 때문에 이 메시지가 표시될 수 있습니다. 자세한 내용은 위 섹션을 참조하세요.
React 0.14.9 또는 React 15.3.0보다 높은 버전을 사용하고 계십니까? 계속 읽어보세요.
독립 실행형 prop-types 사용하기 위해 구성 요소를 마이그레이션할 때 모든 유효성 검사기 함수를 직접 호출하면 오류가 발생하기 시작합니다 . 이렇게 하면 프로덕션 코드에서 누구도 이에 의존하지 않으며 번들 크기를 최적화하기 위해 구현을 제거하는 것이 안전합니다.
다음과 같은 코드는 여전히 괜찮습니다.
MyComponent . propTypes = {
myProp : PropTypes . bool
} ; 그러나 이와 같은 코드는 prop-types 패키지에서는 작동하지 않습니다.
// Will not work with `prop-types` package!
var errorOrNull = PropTypes . bool ( 42 , 'myProp' , 'MyComponent' , 'prop' ) ;오류가 발생합니다.
Calling PropTypes validators directly is not supported by the `prop-types` package.
Use PropTypes.checkPropTypes() to call them.
(이 메시지와 함께 오류가 아닌 경고가 표시되는 경우 위의 호환성 섹션을 확인하세요.)
이는 새로운 동작이며 React.PropTypes 에서 prop-types 패키지로 마이그레이션할 때만 발생합니다. 대부분의 구성 요소의 경우 이는 중요하지 않으며 구성 요소에 이 경고가 표시되지 않으면 코드를 마이그레이션해도 안전합니다. prop-types 사용하도록 가져오기를 명시적으로 변경하여 구성 요소에 대한 이 변경 사항을 선택하기 때문에 이는 React의 주요 변경 사항이 아닙니다. 일시적으로 이전 동작이 필요한 경우 React 16까지 React.PropTypes 계속 사용할 수 있습니다.
반드시 수동으로 검증을 실행해야 하는 경우 PropTypes.checkPropTypes() 호출하세요. 유효성 검사기와 달리 이 함수는 빈 함수로 대체되므로 프로덕션 환경에서 호출해도 안전합니다.
// Works with standalone PropTypes
PropTypes . checkPropTypes ( MyComponent . propTypes , props , 'prop' , 'MyComponent' ) ;자세한 내용은 아래를 참조하세요.
프로덕션에서 유효성 검사를 사용하려면 prop prop-types 대신 prop-types/prop-types 가져오거나 요구하여 개발 버전을 사용하도록 선택할 수 있습니다.
자체 사용자 정의 PropTypes 유효성 검사기에서 PropTypes 유효성 검사기를 호출하는 경우에도 이 오류가 나타날 수 있습니다 . 이 경우 해결 방법은 모든 인수를 내부 함수에 전달하는지 확인하는 것입니다. 이 페이지에는 문제를 해결하는 방법에 대한 자세한 설명이 있습니다. 또는 React 16까지 일시적으로 React.PropTypes 계속 사용할 수 있습니다. 이 경우에는 여전히 경고만 표시되기 때문입니다.
Browserify 또는 Webpack과 같은 번들러를 사용하는 경우 다음 지침에 따라 개발 또는 프로덕션 모드에서 애플리케이션을 올바르게 번들링하는 것을 잊지 마세요. 그렇지 않으면 사용자에게 불필요한 코드를 제공하게 됩니다.
React는 컴포넌트에 설정한 propType을 자동으로 확인하지만 React 없이 PropTypes를 사용하는 경우 다음과 같이 PropTypes.checkPropTypes 수동으로 호출할 수 있습니다.
const myPropTypes = {
name : PropTypes . string ,
age : PropTypes . number ,
// ... define your prop validations
} ;
const props = {
name : 'hello' , // is valid
age : 'world' , // not valid
} ;
// Let's say your component is called 'MyComponent'
// Works with standalone PropTypes
PropTypes . checkPropTypes ( myPropTypes , props , 'prop' , 'MyComponent' ) ;
// This will warn as follows:
// Warning: Failed prop type: Invalid prop `age` of type `string` supplied to
// `MyComponent`, expected `number`. PropTypes.checkPropTypes(...) console.error 메시지가 한 번만 표시됩니다. 테스트에서 오류 경고 캐시를 재설정하려면 PropTypes.resetWarningCache() 호출하세요.
prop-types는 MIT 라이센스를 받았습니다.
