React 컴포넌트 클래스에 propTypes 정적 속성을 이용하면 속성 타입을 설정할 수 있다. 속성 타입 기능은 자료형을 강제하는 대신 '경고'를 보여준다.
'개발 모드'에서는 속성 타입이 일치하지 않으면 콘솔에 경고 메시지를 보여준다. 하지만 '프로덕션 모드'에서는 잘못된 속성 타입을 사용하는 것을 방지하지 않는다. 즉, 프로모션 모드에서는 경고 문구가 없다. 따라서, propTypes는 대체로 '개발 단계'에서 잘못 사용한 자료형에 대해 경고하는 편의 기능이라고 보면 된다.
※ 난독화하지 않은 버전을 '개발 모드', '난독화를 거친 버전을 '프로덕션 모드'로 React는 정의하는데, React 측에서는 이에 대해 이렇게 말한다.
=> "우리는 두 가지 버전의 React를 제공합니다. 개발을 위한 압축하지 않은 버전과 난독화를 거친 프로덕션 버전입니다. 개발 버전에는 흔한 실수를 막기 위해 추가적인 경고 문구를 포함시킨 반면에, 프로덕션 버전에는 추가적인 성능 최적화를 적용하고 모든 오류 문구를 제거했습니다."
React15.5 버전과 이후 버전에서는 타입 정의가 prop-types라는 별도 패키지로 제공된다. 그리고 prop-types를 아래와 같이 HTML 파일에 추가해야 한다. 패키지는 전역 객체 window.PropTypes이다.
<script src="https://unpkg.com/prop-types@15.5.4/prop-types.js"></script>
<script src="https://unpkg.com/prop-types@15.5.4/prop-types.min.js"></script>만약 React15.4버전이나 이전 버전을 사용하는 경우에는, React.PropTypes로 React에 포함되어 있어 prop-types를 추가할 필요는 없다.
이해를 돕기 위해, 속성 타입으로 문자열, 숫자, 열거자를 사용하는 Datepick 클래스를 정적 속성으로 propTypes를 간단하게 정의해보았다.
~~~
Datepick.propTypes = {
currentDate : PropTypes.string,
rows : PropTypes.number,
locale : PropTypes.oneOf(['us','ca','ko'])
}※ 프론트엔드의 사용자 입력 유효성 검사는 쉽게 피해갈 수 있다. 따라서 여기에 의존할 필요없다! 나은 UX를 제공하기 위한 목적으로만 사용하고, 반드시 서버 측에서 모든 것을 검사해야한다!!!
속성 타입을 검사하라면, 속성을 키로 하고, 타입을 값으로 하는 객체를 생성하여 propTypes로 추가해야 한다. React의 타입은 PropTypes 객체에 있다.
몇 가지만 보여주면 아래와 같다.
- PropTypes.string
- PropTypes.number
- PropTypes.bool
등등
자,
Button 클래스를 정의하고, 문자열을 값으로 하는 선택적인 속성인 naming이 있다고 하자. 정적 클래스 속성으로 propTypes를 정의해서 키는 naming, 값은 PropTpes.string으로 한다. 아래와 같이 말이다.
Button.propTypes = {
naming : PropTypes.string
}'isRequired'를 타입에 추가하면 '필수 속성'으로 지정할 수도 있다. 만약 naming이 필수 속성이면서 문자열 형식이라면 아래와 같이 정의할 수 있다.
Button.propTypes = {
naming : PropTypes.string.isRequired
}그리고 만약, ssafy 속성이 필수 속성이고, ssafy 속성의 값이 함수여야 한다면 아래와 같다.
Button.propTypes = {
ssafy: PropTypes.fun.isRequired
}이외에도 타입 유효성 검사를 직접 정의할 수 있는 기능도 있다.
'사용자 정의 유효성 검사'라고 하는데, 이를 구현하기 위해 Error 인스턴스를 반환하는 표현식을 생성하게 된다.
생성 표현식은 propTypes : {~~~}에서 속성의 값으로 사용될 수 있다.
이 파트에서 재미난 점이 있는데, 경고 메시지는 한 번만 노출된다는 것이다.
만약 버튼을 5개를 구현했는데, 3개가 필수속성을 가지지 못 했다면, 3개에 대해 오류 메시지가 떠야한다. 하지만 1개만 뜬다.
Content의 render()를 한 번 실행할 때, 각 속성에 대한 경고는 한번씩만 노출된다.
그리고 React에는 확인해야 할 부모 컴포넌트를 알려주는 기능도 있다. 컴포넌트를 많이 다루다보면 매우 유용하게 필요한 기능이다.
개발자 도구의 메시지를 펼쳐보면 경고 메시지를 노출하게 만든 엘리먼트 코드의 줄 번호를 확인할 수 있다.
추가적인 타입과 헬퍼 메서드들도 있는데 그것은 이 글에서는 다루지 않겠다. 만약 궁금하면 송식 문서를 확인하면 좋다!(http://mng.bz/4Lep)
