컴포넌트 내부의 immutable data(변하지 않는 데이터)를 처리할 때 사용
JSX 내부에 {this.props.프로퍼티이름} 으로 작성
컴포넌트의 속성에서 <Component 프로퍼티이름="값" /> 으로 값 전달
this.props.children은 기본 props로,
컴포넌트 내에 작성한 값이 들어감 <Component>값</Component>
class Codelab extends React.Component{
render(){
return(
<div>
<h1>Hello {this.props.name}</h1>
<div>{this.props.children}</div>
</div>
);
}
}
class App extends React.Component{
render(){
return(
<Codelab {this.props.name}>
{this.props.children}
</Codelab>
);
}
}
ReactDOM.render(
<App name="velopert">value</App>, document.getElementById('root')
)
컴포넌트의 선언이 끝난 후 defaultProps 객체로 작성하여 설정
Component.defaultProps= {기본 값}
class App extends React.Component{
render(){
return(
<div>{this.props.value}</div>
);
}
}
App.defaultProps = {
value :0
}
** React v15.5 부터 패키지 변경, prop-types 라이브러리 추가 후 사용
1. import propTypes from 'prop-types'
2. propTypes.PropTypes.타입 으로 사용해야함
Component.propTypes = {
프로퍼티이름: React.PropTypes.타입
};
props type의 종류
sting
number
any: 타입에 관계 없음
옵션
.isRequired: 필수 입력
** 리액트 메뉴얼 참고
import * as propTypes from "https://cdn.skypack.dev/prop-types@15.7.2";
class Codelab extends React.Component{
render(){
return(
<div>
<h1>Hello {this.props.name}</h1>
<h2>{this.props.number}</h2>
<div>{this.props.children}</div>
</div>
);
}
}
Codelab.propTypes = {
name: propTypes.PropTypes.string,
number: propTypes.PropTypes.number.isRequired
};
Codelab.defaultProps = {
name:'val'
}
class App extends React.Component{
render(){
return(
<Codelab name={this.props.name}>
{this.props.number}
</Codelab>
);
}
}
App.defaultProps = {
value:'value'
}
ReactDOM.render(
<App>child</App>, document.getElementById('root')
)
react와 react-dom의 min 버전에서는 오류를 보여주지 않는다
위의 코드에서 number에 대한 Props를 설정하지 않았음
-> defaultProps에서 작성하거나 컴포넌트 속성 값으로 전달
PropTypes는 필수 요소가 아니다.
코드의 디버깅을 위해(안정성), 유지보수를 위해(효율성) 사용한다.