propTypes 를 통한 props 검증

컴포넌트의 필수 props 를 지정하거나 props 의 타입(type) 을 지정할 때는 propTypes 를 사용합니다.

컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다.

우선 import 로 propTypes를 불러옵니다.

 

그리고

이렇게 propTypes 라고 지정해주고, PropTypes.(지정할타입) 을 정해준다면

메인에서 해당 타입에 맞는 값이 들어왔을 때에만 올바르게 작동합니다.

다른값이 들어왔을 때에는 오류 반환

 

isRequired를 사용하여 필수 propTypes 설정도 가능합니다.

 

이 처럼 코드를 작성하고 메인에서 numnumber 에 값을 주지 않을때에는 웹에서 콘솔로그에는 오류를 반환하고,

메인App.js에서 numnumber에 올바른 값을 주었다면 오류가 나타나지 않을 것 입니다.

 

- PropTypes의 종류

  - array: 배열

  - array0f(다른 PropType): 특정 PropType으로 이루어진 배열을 의미합니다. 예를 들어 arrayOf(PropTypes.number) 는

숫자로 이루어진 배열입니다.

  - bool: true 혹은 false 값

  - func: 함수

  - object: 객체

  - string: 문자열

  - symbol: ES6의 symbol

  - node: 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX코드, children도 node PropType 입니다.)

  - instanceOf ( 클래스 ) : 특정 클래스의 인스턴스 ( 예: instanceOf(MyClass))

  - oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나

  - oneOfType([React.PropTypes.string, PropTypes.number]) : 주어진 배열 안의 종류 중 하나

  - objectOf (React.PropTypes.number) : 객체의 모든 키 값이 인자로 주어진 PropType인 객체

  - shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체

  - any: 아무 종류

 

더 자세한 정보는 https://github.com/facebook/prop-types 에서 확인할 수 있습니다.

 

출처&참고: 도서 - 리액트를 다루는 기술