Dynamic Information를 다루어야할 경우가 많음 예) scoreboard

변하는 정보를 리액트에서 다루는 방법 ➡️ props, state
props와 state 외에는 모든 정보가 static 해야함

State

Initial State

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를 나타내는 객체

state 조작

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>
    );
  }
}

state 업데이트하기

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 = render

이상하게 그냥 값만 바꾼거지 렌더링을 다시 돌리지 않았는데 어떻게 변화가 일어나는지?
➡️ setState를 통하여 state를 변경한 경우, 동시에 render()까지 일어난다

this.setState()는 두 가지 함수를 실행

1. this.setState()
2. .render()

이것이 .render() 안에서 .setState() 메소드를 사용할 수 없는 이유!