setState의 비동기성을 들어보셨습니까 ?

리액트에 대한 질문을 물어볼때 많이 나오는 질문을 하나씩 파보려고 합니다. 

 

 

setState는 비동기입니다 ?  

 



위에 코드를 보다 싶이 클릭을 하고 난 직후에 console로 찍어보면 상태가 업데이트 되기 전값이 나오는 것을 확인 할 수 있습니다.  이렇게 비동기라는 것을 확인할 수 있는데, 이는 리액트에서 효율적으로 상태를 관리하기 위함인데, 다른 것을 한번 봐보자

 

업업을 누르면 2개씩 안 올라가는 것을 볼 수 있다. 이는 useState 자체가 상태를 저장하고 있는 곳이 결국 객체이고, count라는 key값을 가지고 있는 것이다. value를 저렇게 받아서 업데이트를 하는 것이다. 결국엔 key값이 같은 작업을 2번하니까 덮어 씌어진거라고 할 수 있다. 여기서 같은 batching이라는 말이 나오는데, 리액트는 여러개의 setState 함수를 만나면 큐에 쌓아놓고 먼저 들어온 순서대로 한번에 호출하고 다 끝나고 마지막에 상태를 업데이트를 한다. 하지만 정말 방법이 없는 건가 ? 

 

아니다. setState는 이전값을 가져와 업데이트를 해주는 함수를 넘겨주면 가능하다. 

 

 

자 이렇게 이전값을 업데이트 해주는 함수를 넣어주니까 정상 동작하는 것을 확인할 수 있습니다. 하지만 console.log로 찍어보면 여전히 이제 이전값이 나오는 것을 볼 수 있는데, 이는 앞서서 말한 batching 작업때문이다. 함수를 통한 업데이트가 아닌 그냥 깡으로 값을 넣어준다면 이 과정에서 key값이 겹치는 애들은 마지막 같은 key값 한정해서 마지막 setState함수 기준으로 값이 업데이트되고, 이전값을 가져와 업데이트하는 함수로 넘겨줬다면 정상적으로 동작한다고 볼 수 있겠습니다.