Dynamic Information를 다루어야할 경우가 많음 예) scoreboard
변하는 정보를 리액트에서 다루는 방법 ➡️ props
, state
props와 state 외에는 모든 정보가 static 해야함
Component Class에 state가 부여된 모습, 벌써 mood state의 디폴트 값이 들어가있다
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { mood: 'decent' };
}
render() {
return <div></div>;
}
}
constructor, super는 ES6 문법 → 꼭 필요함
this.state = { mood: 'decent' };
state 부분은 항상 객체가 있어야함, Initial state를 나타내는 객체
this.state.원하는state명
의 형태로 state를 호출해서 사용할 수 있음
class TodayImFeeling extends React.Component {
constructor(props) {
super(props);
this.state = { mood: 'decent' };
}
render() {
return (
<h1>
I'm feeling {this.state.mood}!
</h1>
);
}
}
this.setState()
를 통해 현재 state에서 다른 값으로 변경할 수 있음
인자
this.setState(state 업데이트 값이 담긴 객체, callback)
💡 Callback 쓰는 경우 없음
{
mood: 'great',
hungry: false
}
=> this.setState({ hungry: true });
{
mood: 'great',
hungry: true
}
this.setState를 사용하는 가장 흔한 방법 : 다른 함수에서 사용하기
class Mood extends React.Component {
constructor(props) {
super(props);
this.state = { mood: 'good' };
this.toggleMood = this.toggleMood.bind(this);
}
toggleMood() {
const newMood = this.state.mood == 'good' ? 'bad' : 'good';
this.setState({ mood: newMood });
}
render() {
return (
<div>
<h1>I'm feeling {this.state.mood}!</h1>
<button onClick={this.toggleMood}>
Click Me
</button>
</div>
);
}
}
toggleMood라는 함수가 render() 밖에서 setState을 통해 mood를 교체하고 있음
➡️ 이를 실행시키는 요소는 button 요소
this
를 사용하는 Event Handler를 작성하는 경우,
constructor에this.methodName = this.methodName.bind(this)
를 작성해놓아야한다.
이상하게 그냥 값만 바꾼거지 렌더링을 다시 돌리지 않았는데 어떻게 변화가 일어나는지?
➡️ setState를 통하여 state를 변경한 경우, 동시에 render()까지 일어난다
this.setState()는 두 가지 함수를 실행
이것이 .render() 안에서 .setState() 메소드를 사용할 수 없는 이유!