setState에서 async를 사용해도 될까?

React의 state 상태를 변경하기 위해서는 setState를 사용해야한다. setState의 경우 비동기 적으로 행동한다.

 

비동기 함수의 경우 Browser에서 Web API로 동작하여 실행시킨 뒤 콜백을 Event Queue에 등록시킨다. 그 이후 Call Stack이 비게되면 이때 Event Queue에서 Call Stack으로 밀어주게 된다. 이를 EventLoop라고 부른다.

 

 

this.setState({myCabinet: "beer"});
console.log(this.stae.myCabinet);

 

위 코드를 실행시키면 알 수 있지만, console에서는 myCabinet이 "beer"로 안 바껴있음을 알 수 있다. beer를 얻기 위해서는 setState의 두 번째 인자에 callback 함수를 작성해야한다.

 

this.setState({myCabinet: "beer"}, () => console.log(this.state.myCabinet));

 

그렇다면 한 번쯤은 이런 생각을 할 것이다. async await를 사용해도 가능하지 않을까?

결론부터 말하자면, setState에서는 async await를 사용하면 안된다.

async/ await 의 기반은 promise다. async 함수는 promise를 반환하고 promise가 함수로부터 반환할 값을 resolve한다. setState는 promise를 반환하지 않기에 await와 함께 사용해서는 안된다.

 

그러면 어떠한 방식으로 사용해야할까?

updateState = (payload) => {
  return new Promise((resolve, reject) => {
    this.setState({
      sitename: payload
    }, () => {
      resolve('Updated')
    });
  });
};

 

showResult = async () => {
  let resultMsg = await this.updateState('webisfree');
  alert(resultMsg);
};

이런 식으로 Promise로 감싸서 사용해도 된다.