ReactJS道具 검증

속성 검증은 컴포넌트의 올바른 사용을 강제하는 효과적인 방법입니다. 이는 애플리케이션이 더 크게 되면 앞으로 발생할 수 있는 오류와 문제를 방지하는 데 도움이 됩니다. 또한 코드가 더 읽기 쉬워지며, 각 컴포넌트가 어떻게 사용되어야 하는지 보여줍니다.

속성 검증

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3>Array: {this.props.propArray}</h3>
　　　　　　　　　　　　<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
　　　　　　　　　　　　<h3>Func: {this.props.propFunc(3}/h3>
　　　　　　　　　　　　<h3>Number: {this.props.propNumber}</h3>
　　　　　　　　　　　　<h3>String: {this.props.propString}</h3>
　　　　　　　　　　　　<h3>Object: {this.props.propObject.objectName}1}</h3>
　　　　　　　　　　　　<h3>Object: {this.props.propObject.objectName}2}</h3>
　　　　　　　　　　　　<h3>Object: {this.props.propObject.objectName}3}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}

　　　
　　　
　　　
　　　
　　　propString:　React.PropTypes.string,
　　　propObject:　React.PropTypes.object
}
App.defaultProps　=　{
　　　propArray:　[1,2,3,4,5
　　　propBool:　true,
　　　propFunc:　function(e){return　e},
　　　propNumber:　1,
　　　propString:　"String　value...",
　　　
　　　propObject:　{
　　　　　　objectName1:"objectValue1",
　　　　　　objectName2:　"objectValue2",
　　　　　　objectName3:　"objectValue3"
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));