[React] setState()는 함수 인자를 전달해야한다.

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.

따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트 된다.

 

import React from "react";

class MyComponent extends React.Component {
  state = {
    number: 0,
    fixedNumber: 0,
  }
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixedNumber}</h2>
        <button onClick={() => {
          this.setState((prev) => {
            return { number: prev.number + 1 };
          });
          this.setState((prev) => {
            return { number: prev.number + 1 };
          });
        }}></button>
      </div >
    );
  }
}

export default MyComponent;

 

즉, 위와 같이 코드를 작성한 경우에는 제대로 동작하지 않는다.

 

 

setState를 쓸 때는 객체 대신 함수 인자를 전달해야한다.

 

import React from "react";

class MyComponent extends React.Component {
  state = {
    number: 0,
    fixedNumber: 0,
  }
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixedNumber}</h2>
        <button onClick={() => {
          this.setState((prev) => {
            return { number: prev.number + 1 }
          });
          this.setState((prev) => {
            return { number: prev.number + 1 }
          });
        }}></button>
      </div >
    );
  }
}

export default MyComponent;

 

 

---