목차
- state 객체 정의
- state 객체 생성
- state 객체 사용
- state 객체 변경
state 객체 정의
컴포넌트에 속하는 속성값을 저장하는 곳.
(Props가 사용자용이라면, State는 제작자용임.)
- React 컴포넌트들은 내장된 state 객체 갖음.
- state 객체가 변하면, 컴포넌트가 다시 렌더링 됨.
state 객체 생성
state 객체는 constructor() 함수 안에서 초기화 됨.
즉, 초기 속성값이 state 객체 안에 담김.
[예제1] 속성값이 1개인 경우
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
this.state = {name: "홈짱닷컴"};
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
[예제2] 속성값이 다수인 경우
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "홈짱닷컴",
host: "Homzzang.com",
memo: "홈페이지 제작관리",
open: 2012
};
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
<p>
{this.state.host}<br/>
{this.state.memo}<br/>
{this.state.open}
</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
state 객체 사용
this.state.property_name
위 구문을 사용해 컴포넌트의 어디서든 state 객체 참조 가능.
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "홈짱닷컴",
host: "Homzzang.com",
memo : "홈페이지 제작관리",
open: 2012
};
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
<p>
{this.state.host}<br />
{this.state.memo}<br />
{this.state.open}
</p>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
state 객체 변경
this.setState() 메서드 사용해, state 객체의 값을 변경 가능.
state 값이 변경되면, 변경 값 기준으로 페이지 다시 렌더링 됨.
주의:
반드시 setState() 메서드로 state 객체를 변경해야 함.
그래야, React가 컴포넌트 업데이트 되었음을 인식해서,
render() 메서드 (및 기타 모든 수명주기 메서드)를 호출해.
변경값 기준으로 페이지가 자동으로 다시 렌더링 됨.
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "홈짱닷컴",
host: "Homzzang.com",
memo: "홈페이지 제작관리",
open: 2012
};
}
changeMemo = () => {
this.setState({memo: "그누보드/영카트 강의"});
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
<p>
{this.state.host}<br/>
{this.state.memo}<br/>
{this.state.open}
</p>
<button
type="button"
onClick={this.changeMemo}
>Change Memo</button>
</div>
);
}
}
ReactDOM.render(<Hz />, document.getElementById('root'));
