[React] React state 비동기성

 

먼저 동기성과 비동기성에 대해 알아보자

동기성

- 우선순위 작업이 끝날 때까지 기다리는 동안 준비상태가 되기 때문에 다른 작업을 진행하지 않는다

 

 

비동기성

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행한다.

자바스크립트의 특성 중 하나이다.

동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할 수도 있다.

 

 

React의 state 비동기성 

 

 

 

  우리가 onClick 이벤트를 넣으며 기대했던건

setNum함수가 3번 돌면서 

기존 숫자에 1씩 3번이 더해지며 4가 나오는것을 기대한다.

 

하지만 여기서는 값이 2만 나오게 된다. 

 

그 이유는 비동기성에 있다.

 

 

 

첫번째 setNum(num+1) 이 완료돼서 state가 update가 되어 num이 2가 되기 전에

다음 setNum(num+1) 으로 넘어가 버리기 때문에 아직 num은 1인 상태이다.

그래서 num값은 1인 상태에서 마지막 setNum(num+1)에 도착을 하게 되고 

최종적으로 값은 2가 나오게 되는 것이다.

 

 

 

그래서 이럴때 우린 어떻게 해야 모두 실행이 되고 값은 4를 얻어낼 수 있을까?

함수를 동기성으로 만들어주면 되는데 방법은 콜백함수를 넣어주는 것이다.

 

setter함수를 콜백 함수로 넣어주게 되면

동기적으로 작동을 하게 된다.

 

 

 

 

 

 

 

 

 

 

 

 

그런데 왜 불편하게 비동기성으로 진행되게 한 걸까???

 

1. 만약 num만 진행하는 게 아닌 다른 값들을 여러 개 넣어서 진행한다면 동시에 진행하는 것이 훨씬 빠를 것이다.

2. 위처럼 setNum이 여러 번 호출이 되어도 비동기성으로 진행이 되면

   state가 업데이트되는 횟수를 줄이고 렌더 되는 횟수를 줄여 과부하를 막아줄 수 있다. 

   만약 개발을 하다가 실수로 여러 번 작성을 하게 되더라도 이런 점에서 과부하를 막아줄 수 있는 것이다