State

props 는 값을 변경할 수 없으나 state 는 값을 바꾸는 작업에 사용된다.

state 는 하나의 객체로서 값을 저장하고 변경한다.

 

• 반드시 생성자에서 state 를 초기화 해야함
• state 를 변경시킬 때에는 setState 함수를 사용해야함.(리엑트 엔진 구동이 됨)
• setState 는 비동기식으로 호출됨

import React, { Component } from 'react';

class StateExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      formData: 'no data',
    };
    this.handleData = this.handleData.bind(this);
    setTimeout(this.handleData, 4000);
  }
  handleData() {
    const data = 'new data';
    const { formData } = this.state;
    this.setState({
      // 스테이트 변경
      loading: false,
      formData: data + formData,
    });
    console.log('loading 값' + this.state.loading);
  }

  render() {
    return (
      <div>
        <span>로딩중 {String(this.state.loading)}</span>
        <span>결과: {this.state.formData}</span>
      </div>
    );
  }
}

export default StateExample;

---

setState 의 인자로 함수를 주면 이전 state 값을 쉽게 읽어 들일 수 있다.

//   handleData(data) {
  //     this.setState(function(prevState) {
  //       const newState = {
  //         loading: false,
  //         formData: data + prevState.formData,
  //       };
  //       return newState;
  //     });
  //   }
  handleData(data) {
    this.setState(prevState => ({ loading: false, formData: prevState.formData }));
  }