프로그래밍 공부 노트

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]) 포함