목차
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'));
최신댓글