[TIP] Changing a state after API call in componentDidMount()

[jang1suh]

componentDidMount()에서 API call을 하고 그 결과로 state를 업데이트하는 경우가 앞으로 꽤 생길 것 같은데, 유용한 처리 방법이 있어서 공유합니다.

componenDidMount 앞에 async, API call 부분 앞에 await를 붙이면 API call이 끝날 때까지 기다렸다 this.setState가 수행되어서 정상적으로 state update가 이뤄집니다!

사실 이렇게 해도 되는지 확신은 없어서, 해보시고 문제 생기면 공유해 주시면 감사하겠습니다.

[deploy-soon]

componentDidMount에서 설정하는 것이면 렌더링 될 때 설정하려고 하시는 것 같은데 혹시 constructor 써도 안되나요?

constructor(props) {
    super(props);
    this.state = {
      newNicknameField: this.props.user.nickname,
      newMessageField: this.props.user.status_message,
    };
  }
componentDidMount() {
    this.props.getUser(this.props.match.params.id);
}

[jang1suh]

음... 제가 라이프사이클을 정확하게 이해 못해서 코드를 잘못 짠 것일 수도 있는데
EditUserInfoContainer.js의 경우엔 mapStateToProps를 이용해서 redux store에 저장된 user를 prop로 받아와서 this.props.user로 사용합니다. 그래서 해당 페이지에서 새로고침을 했을 경우엔 this.props.user가 constructor가 불려지는 시점에는 null이 되어서 에러가 발생하네요. 여러 방법이 있고 상황에 맞게 사용하면 좋을 것 같습니다!

[deploy-soon]

newNicknameField: this.props.user ? this.props.user.nickname : 'default'

이런식으로 하면 이상할까요
componentDidMount를 async로 설정하니 뭔가 라이프사이클 같지 않아서요

[dreamsh19]

근데 async 라는게 await를 사용하는 함수에 붙는 거 아닌가요?
componentDidMount가 async로 호출된다는 의미가 아닌 것 같아서 라이프사이클과는 상관없어보이는데 제가 잘못이해한건가요?

[jang1suh]

@dreamsh19 말씀하신 대로 함수 안에 await를 사용한 경우 그 함수 앞에 async를 붙여주는 게 맞습니다.
@deploy-soon 제안해주신 방법도 시도해 보겠습니다!

https://stackoverflow.com/questions/47970276/is-using-async-componentdidmount-good
이렇게 쓰는 경우가 있는지 찾아봤는데, 문제는 없는 것 같아 일단은 저렇게 사용하도록 하겠습니다:smile: