87. await와 마이크로큐의 관계

isSubmitting을 활용한 중복뮤테이션 방지

isSubmitting = 로딩중에는 클릭이 안되게 만드는 것

자세히 보면

버튼을 클릭하고 실행이 된다
setIsSubmitting을 true로 만든다
그런데 지금까지 배운 것은 함수가 끝나야 반영이 되는 것이었다
버튼을 클릭했더니 disabled가 있기 때문에 색깔이 바뀌었다
그러고 나서 API 요청 받아오고 다시 살아난다

클릭 안되게 한 다음 요청이 되고 다시 풀리게 되어있다

await와 마이크로큐의 관계

console창에 어떤 순서로 찍힐까?

잘 모르면 이렇게 생각할 것이다

하지만 결과는?

async await이 왜 있을까?

await를 만나는 순간 어떻게 되냐면

이 function이 하던 일을 중단하고 마이크로큐에 들어간다

 

응용

여기서는 어떤 순서로 찍힐까?

알아야 할 것
1 - await 뒤에 붙은 것은 아무런 상관이 없구나~
2 - await를 감싸고 있는 async function이 마이크로큐에 들어가는구나~
3 - async가 붙은 이유는 await가 들어있는 function이에요~ 를 알려주기 위해 async가 붙어 있구나~

다시 보면

asycn function은 마이크로큐로 가는 것

마이크로큐로 가기 전 setIsSubmittng(true)에서 끊고 간다

그래서 true가 먹힌 것

formState에 isSubmitting이 있다

이걸 쓰기 전에는 아래 한 것처럼 작동 원리를 알아야 한다

 

옵저버블 observable
promise의 연장선
promise는 한번 요청해서 받아오는 것
observable는 요청을 여러번 하는 것