useState 개념 과 비동기 개념? 질문드립니다. 감사합니다.

안녕하세요 ㅠㅠㅠ 선생님 자바스크립트 강의도 들어보고 리액트도 듣는데, 갑자기 여기서 머리가 터졌습니다... 한번만 살려주심 안될까요..ㅠㅠ

setState, useState가 비동기적으로 작동한다는 개념을 모르겠습니다ㅠ

우선, 버튼 누를 때, onClick 함수로 다음과 같은 코드를 실행시키도록 하였습니다.

그리고, useEffect로 console.log를 찍어보았습니다.

[케이스 1]

setCount(count +3);

setCount(count => count + 7);

setCount(count + 1);

(결과: 1씩만 증가  (*제 생각>> 왜지? 마지막꺼만 되는건가? 해서 아래로 바꿔봄)

[케이스 2]

setCount(count + 1);

setCount(count +3);

setCount(count => count + 7);

(결과: 10씩 증가, (*제 생각>> 왜 2,3번째꺼가 작동하지?)

[케이스 3]

setCount(count + 3);

setCount(count + 1);

setCount(count => count + 7);

(결과: 8씩 증가, (*제 생각>> 왜2,3번째꺼가 작동하는거지?)

 
도대체 구조가 어떻게 되길래 이렇게 작동하는건지 이해가 안가네요.ㅠㅠ 

오래동안 찾아본 결과, 

[1] state의 비동기 개념 [2] 리액트 배치 개념 [3] 함수형 업데이트 , 제 생각에는 이 3가지 개념이 머릿속에서 혼재되어 이해를 못하고 있는 것 같습니다.

다른 많은 블로그들의 설명을 봤는데 대체적으로,

setCount(count + 3); 

setCount(count + 2);

setCount(count + 1);

이 결과가 1씩 증가하는 이유를, 비동기때문이다. 배치이기 때문이다. 라고 말하는데 이해가 가지 않습니다.

비동기라서 1개만 적용되는건가요? 아니면 배치이기 때문에 상태업데이트를 '퉁쳐서'? 하기 떄문에 마지막 하나만되는건가요..?

아니면 배치이더라도 3개다 실행하지만, 키 값(?)이 같아서 결론적으로 마지막 하나만 실제로 적용되는건지

아니면 비동기이자 배치이기 때문에 저런 현상이 발생하는건가요?? 개념이 혼재되어서 머리가 복잡해서 터질 지경입니다..

명확한 설명이 머리속에서 정리안되서 힘든 것 같습니다.

그리고 암튼 함수형 업데이트를 하면, 이전 상태의 값을 잘 업데이트가 가능하다고 해서 함수형 업데이트를 한다는 것은 어느정도 이해했습니다.

그런데 위의 현상([케이스1])이 발생하는 이유가 뭘지 생각을 해보니, 지금 비동기, 배치 개념이랑 setState 함수의 원리를 제대로 이해 못하고 있는 것 같은데,

어디서 구멍이 난 건지 이해할 수가 없네요ㅠ.. 살려주시면 감사하겠습니다.

또한, 어느 블로그 설명들보면 이렇게 2가지도 있는것 같은데

-배치작업을 위해서, 비동기적으로 동작한다.

-비동기작업을 배치로 돌린다. 

어느 표현이 맞는걸까요??

긴 글을 읽어주셔서 매우 감사합니다. 좋은 하루 되세요. 감사합니다!!!!!