props
props
- 컴포넌트 내부의 Immutable Data(변화하지 않는 데이터)를 처리할때 사용
- JSX 내부에 {this.props.propsName}
- 컴포넌트를 사용할때, <> 괄호안에 propsName = "value"
- this.props.children은 기본적으로 갖고있는 props로서, <Cpnt>여기에 있는 값이 들어간다</Cpnt>
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 name="Hyojun">HHHH</Codelab>
);
}
}
ReactDOM.render(<App/>,document.getElementById("root"));
Hello Hyojun HHHH가 나온다.
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 name={this.props.name}>{this.props.children}</Codelab>
);
}
}
ReactDOM.render(<App name="Hyojun">Hello</App>,document.getElementById("root"));
이렇게 마지막에서 써줘도 올라가면서 적용이 된다. 앞으로는 이렇게 많이 쓸것이다.
기본값 설정 Component.defaultProps = {…}
기본값 설정할 때에는 컴포넌트 선언이 끝난 후 설정하면된다.
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 name={this.props.name}>{this.props.children}{this.props.value}</Codelab>
);
}
}
App.defaultProps = {
value : 0
}
ReactDOM.render(<App name="Hyojun">Hello</App>,document.getElementById("root"));
타입 검증 Component.propTypes = {…}
이 역시 컴포넌트 선언 끝난 후 설정한다. 기본타입을 지정해주는것이다.
이 타입이 아닐경우 개발자도구 콘솔에서 경고를찍는다. min버전은 에러가 뜨지 않는다.
유지보수 및 제대로 사용되기 위해선 설정하는것이 좋다.
App.defaultProps = {
value : 0,
secondVlaue : 150,
thirdValue : "asdfasdf"
}
App.propTypes = {
value : React.PropTypes.string,
secondValue : React.PropTypes.number,
thirdValue : React.PropTypes.any.isRequired
};
이렇게되면 value가 스트링이어야하는데 0이므로 콘솔에서 에러를 찍는다.