propTypes를 통한 props 검증

propTypes

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

사용방법

import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => {
  return (...);
};

MyComponent.propTypes = {
  name: PropTypes.string
};

• 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미

• 만약 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면 브라우저 개발자 도구의 Console 탭에는 오류가 나온다
  
• 값이 나타나기는 하지만, 콘솔에 경고 메세지를 출력하여 개발자에게 propTypes가 잘못되었다는 것을 알려준다

isRequired를 사용하여 필수 propTypes 설정

import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => {
  return (...);
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

• 만약 propTypes에서 지정한 문자열과 다르다면
  콘솔에 오류메세지가 출력될 것이고, 렌더링 되지도 않을 것이다

• propTypes에서 지정할 수 있는 타입은 엄청 많다
  • 검색해서 더 찾아보자