setState의 비동기적 속성, prevState, prevProps

Asynchronous

setState()는 비동기 (asynchronous)로 작동한다.

그 말은 즉슨 setState로 변경한 state값은 즉시 적용되지 않는다는 뜻이다.

vscode에서 마우스 커서를 올려보면 다음과 같이 callback이 있음을 알 수 있다.

 

 

예시를 위해 버튼을 누르면 카운트를 1씩 증가시키는 코드를 작성해보면 다음과 같다.

// index.js
ReactDOM.render(
  <React.StrictMode>
    <App increment={1} />
  </React.StrictMode>,
  document.getElementById('root')
);


// App.js
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 30 + this.props.increment,
    };
  }

  handleClick = () => {
      this.setState((prevState, prevProps) => {
        return { count: prevState.count + prevProps.increment }
      },
      () => console.log("callback", this.state.count))
      console.log("out of setState", this.state.count);
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Update State</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

console에 각각 "callback", "out of setState"로 출력해보았다.

 

 

Update State 버튼을 눌러보면 눈에는 바로 카운트가 증가된 것 처럼 보인다.
하지만 console을 보면 callback 안에 있는 부분은 바로 변경된 값이 적용되지만, 밖의 부분은 1씩 느리다.

 

prevState, prevProps

말 그대로 이전 상태, 이전 props를 나타낸다.

 

setState에서 이 변수를 쓴다면 위의 예시 코드처럼 handleClick 안에서 this.state는 prevState로, this.props는 prevProps로 대체하여 쓸 수 있다.