리액트 setState를 함수형으로 사용해야하는 이유

관련글 (원글)

setState 함수에 인자를 object로 줄 경우 setState는 비동기로 작동한다.

비동기로 작동한다는 것은 순서를 보장하지 못하고 순서가 중요한 로직일 경우 예측되지 않은 결과를 초래할 수 있다.

setState({count: this.state.count+1});

setState({count: this.state.count+1});

setState({count: this.state.count+1});

한 함수안에서 위의 코드가 실행되면 +3을 기대하게 되지만 실제로는 +1된다.

내부적으로 한꺼번에 처리하기 때문이다. 더 자세한 내부 작동은 관련글에서 확인할 수 있다.

하지만 함수형으로 실행할 경우

setState((state, props) => ({count: state.count+1}));

setState((state, props) => ({count: state.count+1}));

실행 큐에 적재되어 차례차례 실행된다.

함수형 프로그래밍은 많은 점에서 장점이 있다.

테스트가 쉽고 선언적이라 직관적이고 재사용도 용이하다.

간단한 상태 변화라도 여러면에서 함수형으로 작성하는 편이 더 유용할 것이다.