[React / React Naive TIPS] SetState에 대해서

[REACT / REACT NAIVE TIPS] SETSTATE에 대해서

• setState에 대해서 써보려고한다. 이유는 내가 여태껏 React, React Native를 접하면서 setState를 얼만큼 잘 알고 다루느냐에 따라서 잘 하고 못하고 갈린다고 생각하기 떄문이다.(물론, 리덕스 같은 써드 파티 모듈들을 잘 다루는 것도 중요하고, 여러가지 중요한게 많겠지만..)

• setState

  • 비동기로 state를 업데이트 한다.

  • 메소드 실행 즉시, 동기적으로 실행 되는 것이 아님

  • 즉, setState를 통해 상태를 변경하더라도 해당 메소드가 실행된 직후에 변경된 상태가 바로 적용되지 않는다.

  • 특히나, setState를 호출한 직후, this.state에 접근하는 것은 흔한 실수

    this.setState({value: this.state.value + 1})
    ​
    //위와 같이 기존 value값을 불러와서 1을 더하는 방식을 쓸 때, 위와 같이 쓰면 안된다..

  • 위와 같은 문제를 접했을 때 가장 좋은 방법은, updater 함수를 사용하는 것이다.

  • this.setState((prevState) => ({value: prevState.value + 1}))

    setState는 setState(updater[, callback]) 와 같이 생겼는데, 여기서 callback은 선택적으로 사용할 수 있고, setState의 실행이 오나료된 이후 실행이되며, 해당 callback이 실행 된 후 컴포넌트의. re-render가 이루어진다.

  • state가 변경 될 수 있는 몇가지 이유

    • 사용자가 버튼을 클릭 또는 탭

    • 어떤 데이터를 서버로 부터 받을 때,

    • 등등