개발일지

react.js의 props의 벨리데이션 테스트를 해 보았다

JSX의 props는 html의 attribute와 비슷하고 외부에서 값을 주입받는 유일한 창구입니다.
React.PropTypes.* 네임스페이스에 정의된 벨리데이션 메소드를 사용해서 벨리데이션을 수행하고,
벨리데이션이 실패하면 console.warn에 에러를 출력합니다.

객체를 대상으로 벨리데이션을 체크하려면?

React.PropTypes.shape를 사용합니다.

커스텀 벨리데이션 함수를 정의하려면?

함수 표현식이나 함수를 직접 대입하면 됩니다.

$.validation과 비슷한 용도로 사용하려면 커스텀 벨리데이션 함수를 정의하거나,
jquery plugin에 상응하는 mixin을 사용해야 할 것 같습니다.
역시나 react.js용 validation mixin이 이미 존재하네요.

아래는 기본적인 기능들을 직접 테스트한 예제입니다.

See the Pen react의 props 벨리데이션 by cinos (@shoveller) on CodePen.