setState ()없이 상태 변경[Mutating State without setState()]

• 구성 요소를 다시 렌더링하지 않고 상태를 변경합니다.
• 나중에 setState가 호출 될 때마다 변경된 상태가 적용됩니다.

나쁜 예

class SampleComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["foo", "bar"],
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // BAD: 여기서 상태를 변경합니다.
    this.state.items.push("lorem");

    this.setState({
      items: this.state.items,
    });
  }

  render() {
    return (
      <div>
        {this.state.items.length}
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

좋은 예

class SampleComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["foo", "bar"],
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // setState ()를 사용하여 업데이트합니다. concat은 새 항목을 추가 한 후 새 배열을 반환합니다.
    this.setState((prevState) => ({
      items: prevState.items.concat("lorem"),
    }));
  }

  render() {
    return (
      <div>
        {this.state.items.length}
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

Related links:

React Design Patterns and best practices by Michele Bertoli.