같은 함수 내에서 SetState 2번 이상 사용해야 될때엔?

이 때까지 함수 안에서 setState를 두 번이나 쓴 적이 없어서, 따로 처리를 해주지 않으면 안된다는 것을 모르고 지내왔다. 참고링크는 아래를 보면 된다.

https://kmhan.tistory.com/314

[React] this.setState를 두번 호출할때 첫번째 호출이 무시되는 경우와 해결방법

 

아래처럼 이렇게 같은 함수 내에서 setState를 두번 활용하고 있었다. 불변성 유지도 잘 시켜주었고, 문제가 없어 보인다. 하지만 post를 콘솔에 찍어보면, 첫번째 setState가 무시되는 것을 확인 할 수 있다.

콘솔 창을 보면 첫번째 setState가 무시되어서, photo가 사라진 것을 볼 수 있다.

 

이것을 해결하기 위해, 두가지 방법이 있다.

1. setState를 한번만 사용한다.
2. setState를 두번 사용하기 위하여 함수를 인자로 넘겨준다.

 

첫번째 방법은 가독성을 해칠 수 있다는 판단 하에 두번째 방법을 진행하였다. 아래와 같이 함수로 넘겨주면 된다.

 

이제는 이렇게 첫번째 setState가 무시되지 않고, 잘 나타나는 것을 볼 수 있다!