[React] PropTypes를 이용한 타입, 유효성, 에러 체크

PropTypes를 이용한 타입, 유효성, 에러 체크

앱이 커짐에 따라 타입체킹을 통해 많은 버그를 잡을 수 있다. Flow나 TypeScript를 통해 체킹도 가능하지만 React에서 빌트인 타입 체킹이 가능하다. 컴포넌트의 props에서 타입을 체크하고 싶다면 특별한  propTypes 속성을 할당할 수 있다. propTypes는 받은 데이터가 유효한지 확인하는데 사용할 수 있는 유효성 검사기를 내보낸다. 

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      

Hello, {this.props.name}
);
  }
}

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

위 예제는 컴포넌트명.propTypes = { 키: value } 에서 value값이 string인지 체크하며 prop에 유효하지않은 값이 전달되면 콘솔에 경고가 노출된다. 성능상의 이유로 propTypes는 개발 모드에서만 체크한다.

그리고 PropTypes.string 유효성 검사 뒤에 isRequired가 있고 없을때 차이점이 발생하는데 isRequired가 있다면 반드시 값을 가지고있어야하며 isRequired는 값을 지정하지 않아도 된다.

PropTypes의 종류

kind	description
array	배열
bool	true/false
func	함수
number	숫자
object	객체
string	문자열
symbol	심벌 개체(ES6)
node	렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment)
element	React element
instanceOf(ClassName)	JS에서 instanceof로 정의 가능한 클래스 인스턴스
oneOf([…Value])	포함된 값들중 하나.(ex: oneOf([‘남자’,’여자’]))
oneOfType([…PropTypes])	포함된 PropTypes들중 하나. (ex: oneOfType([PropTypes.string, PropTypes.instanceOf(MyClass)]))
arrayOf(PropTypes)	해당 PropTypes으로 구성된 배열
objectOf(PropTypes)	주어진 종류의 값을 가진 객체
shape({key:PropTypes})	해당 스키마를 가진 객체.(ex:shape({name:PropTypes.string,age:PropTypes.number}))
exact({key:PropTypes})	명확하게 해당 스키마만 존재해야함.