[React] 함수형 setState

리엑트를 사용하는 사람들한테 가장 많은 실수를 유발시키거나, 문제를 일으키는 부분은 바로 state를 set시키는 과정이라고 생각합니다. 개인적으로 질문을 주시는 분들 중 절반정도의 분들은 setState의 비동기 문제때문에 원치않은 state를 사용하고 계셨습니다.

 

이처럼 setState는 비동기 작업으로 우리가 언제! 정확히 실행 되는지를 보장할 수 없습니다.

따라서 한 함수내에서 또는 같은 실행환경?에 있는 곳에서 같은 같은 state를 여러번 set시키는 것은 안됩니다.

하지만 꼭 사용을 하고 싶거나, 그래야만 하는 상황이 존재한다면 방법이 한가지 있습니다.

바로 함수형 setState입니다. 

 

위와같이 객체의 형태가 아닌 함수의 형태이기때문에 큐에 넣고 순차적으로 실행할 수 있게 해줍니다.

위와 같이 실행이 되면 위의 결과는 1, 아래의 결과는 3이됩니다.

 

함수형 컴포넌트일때의 모습입니다.

(물론 저런 결과값들이 해당 setState들의 바로 다음줄에 나온다면 나오지 않을겁니다.)