[React] React에서 setState를 지양하라구요?

" 기껏 Life Cycle을 공부했는데, React의 state 메커니즘을 쓰지 말라구요? "

어제 보냈던 Merge Request(Github에서 Pull Request)에서 setState는 쓰지 않는 게 좋겠다는 피드백을 받고 멘붕이 왔습니다. 왜 React의 state 메커니즘을 지양하는 게 좋겠다고 하는 걸까요? 그렇다면 어떻게 해야 할까요?

setState는 비동기적이다.

setState 메소드는 호출되는 즉시 실행되는 것이 아닌, 하나의 요청이라고 이해하고 있어야 합니다. 비동기적으로 실행되기 때문이죠. 많은 분들이 setState로 state를 변경한 직후에 this.state에 접근하는 것이 아무 문제가 없을 것이라고 생각할 겁니다. 하지만, setState는 비동기 메소드이기 때문에 state가 바로 바껴있지 않을 가능성이 큽니다.

그런데, setState는 왜 비동기적일까요?

state는 동기적으로 업데이트가 되지만, props 는 부모 컴포넌트가 re-render 될 때까지 props를 알 수가 없기 때문입니다.

그래서 저는 다음과 같이 Mobx state tree를 사용해서 더 편하고, 동기적으로 state를 관리하도록 해 주었습니다.

@observable token = true;
 
@action private renderToken = () => { this.token = true }
@action private renderEOA = () => { this.token = false }

<View style={styles.listTab}>
  <TouchableRipple
    style={styles.tabButton}
    onPress={this.renderToken}
  >
    <Text style={this.token ? styles.selectedFont : styles.unselectedFont}>
      토 큰
    </Text>
  </TouchableRipple>
  <TouchableRipple
    style={styles.tabButton}
    onPress={this.renderEOA}
  >
    <Text style={this.token ? styles.unselectedFont : styles.selectedFont}>
      계 좌
    </Text>
  </TouchableRipple>
</View>

<View style={styles.listBody}>
  { this.token ?
    <TokenListScreen navigation={this.props.navigation} /> :
    <EOAListScreen navigation={this.props.navigation} />
  }
</View>

참고

https://brunch.co.kr/@hee072794/108

https://jaeyeophan.github.io/2018/01/02/React-tips-for-beginners/

https://medium.com/@Dongmin_Jang/reactjs-setstate-%EC%99%9C-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EC%B2%98%EB%A6%AC%EB%90%98%EB%8A%94%EA%B0%80-8197d707ca6a