ReactJS #05 - State & Props
이번 포스팅에서는 리액트의 State와 Props에 대해서 알아보겠습니다.
State
State는 데이터가 오는 곳입니다.
리액트를 사용할 때에는 이 State를 최소화 하고, stateful 컴포넌트를 줄이는 것이 좋습니다.
만약 스테이트를 사용하는 10개의 컴포넌트를 사용한다면, 한 컴포넌트에서 다른 모든 state를 정의하고 다른 컴포넌트를 참조하여 사용하는 것이 좋습니다.
App.js
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
"content": "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
- 실행 화면
Props
State와 Props의 가장 큰 차이는 props는 변경할 수 없다는 점입니다.
그래서 컨테이너 컴포넌트에서는 변경될 수 있는 것들을 State로 지정하고,
반면에 자식 컴포넌트들은 Props를 이용하여 State를 전달받게 됩니다.
이번에는 독자적으로 Props를 이용해봅시다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.getElementById('root'));
export default App;
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;
- 실행 화면
Default Props
reactDom.render()에 props를 넣지 않더라도, 컴포넌트 생성자에 직접 디폴트 Props를 지정해줄 수 있습니다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
App.defaultProps = {
headerProp: "Header from props...",
contentProp:"Content from props..."
}
export default App;
- 실행 화면
State & Props
위에서 말한 스테이트를 사용하는 여러개의 컴포넌트를 사용한다면,
한 컴포넌트에서 다른 모든 state를 정의하고 다른 컴포넌트를 참조하여 사용하는 것이 좋습니다.
이번엔 그 예시를 보도록 합니다.
App.js
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from props...",
"content": "Content from props..."
}
}
render() {
return (
<div>
<Header headerProp = {this.state.header}/>
<Content contentProp = {this.state.content}/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;
- 실행 화면
Props Validation
우리는 위의 Props들을 validation 할 수 있습니다.
Properties validation은 컴포넌트들이 알맞은 props를 쓸 수 있도록 도와줍니다.
어플리케이션이 커지기 전 개발과정에서 이 Validation은 미래에 일어날 버그와 문제들을 사전에 예방할 수 있습니다.
그리고 변수들이 어떻게 사용되는지 알 수 있기 때문에, 가독성이 늘어납니다.
validation은 App.propTypes로 지정합니다.
만약 맞지 않는 타입의 내용을 prop으로 지정한다면, 콘솔 에러가 발생하게 됩니다.
App.js
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.objectName1}</h3>
<h3>Object: {this.props.propObject.objectName2}</h3>
<h3>Object: {this.props.propObject.objectName3}</h3>
</div>
);
}
}
App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
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;
- 실행 화면 (정상일 경우)
- 실행 화면 (필요한 Props를 입력하지 않았을 때)
- 실행 화면 (validation에 맞지 않는 값을 입력하였을 때)
