앱의 규모가 커지면서 데이터의 수가 증가하고, 종류도 다양해진다. 점점 복잡해지는 상황에서 에러를 최소화하기 위해서 적절한 데이터를 사용할 필요가 있는데, prop-types 라이브러리에 내장된 기능을 활용하여 데이터 유효성을 검증하려고 한다.
설치
npm install prop-types
데이터 검증 유형
기본형식
import PropTypes from 'prop-types';
functino App({propString, propNumber, propArray, propObject, propFunc, propBool, propSymbol}) {
return (
// ...
);
}
App.propTypes = {
// 문자열
propString: PropTypes.string,
// 숫자
propNumber: PropTypes.number,
// 배열
propArray: PropTypes.array,
// 객체
propObject: PropTypes.object,
// 함수
propFunc: PropTypes.func,
// true, false
propBool: PropTypes.bool,
// 심볼
propSymbol: PropTypes.symbol,
}
- 종류 : String, Number, Array, Object, Function, Boolean, Symbol
필수 prop 지정하기
import PropTypes from 'prop-types';
function App({ name }) {
return (
// ...
);
}
App.propTypes = {
name: PropTypes.string.isRequired,
}
- isRequired를 작성하여 해당 prop의 중요성을 더 강조한다.
- 잘못된 유형의 데이터 값이 들어오거나 값이 없다면 console 창에 warning 메시지가 출력된다.
참고
'ReactJS' 카테고리의 다른 글
[React] 왜 React를 사용하는가 (0) | 2022.04.19 |
---|