[TIL] 22.12.09 - Callback / Promise / Async-await, 매크로-태스크큐 / 마이크로-태스크큐

Callback / Promise / Async-await

Callback 함수

function aaa(qqq) {
	// 함수 로직
}

aaa(function(){})

callback함수는 함수의 인자로 들어가는 함수를 뜻한다.

API 요청 또한 callback함수를 사용해서 데이터를 받아온다.

콜백 함수의 단점

콜백 지옥에 빠져서 코드의 유지보수가 어렵게 된다.

콜백 지옥을 개선한 방법이 Promise 이다.

Promise

• promise chain
  promise를 계속해서 체이닝 시키는것을 의미한다.

• 위의 코드에서 console 실행 결과는 1 > 5 > 2 > 3 > 4
  setTimeout과 같이 axios를 통해 get하는 데이터는 queue에 저장되었다가 실행되기 때문이다.

 function axios() {
 	return new Promise((성공시, 실패시) => {

    })
 }

axios의 원리 이해

• axios 요청은 원래 return값이 new promise() 이다.
  return 값으로 Promise를 보내기 때문에 get 요청시 .then() 이나 await로 받을 수 있다.
  예전에는 .then / .catch를 사용했으나, 현재는 await를 많이 사용한다.

async-await

• await는 promise를 기다리는 것이기 때문에 promise 앞에만 await를 붙일 수 있다.

매크로-태스크큐 / 마이크로-태스크큐

• 매크로 태스크큐 : setTimeout, setInterval 등이 들어가는 큐
• 마이크로 태스크큐 : Promise 등이 들어가는 큐

매크로 / 마이크로 태스크 큐는 실행 우선순위가 다르다.

마이크로 태스크큐가 우선순위가 높고, 매크로 태스크큐는 우선순위가 낮다.

따라서, 마이크로 태스크큐에 보관된 부분이 먼저 실행되고, 매크로 태스크큐에 저장된 부분이 나중에 실행된다.

위의 예시에서 콘솔 실행 순서는

시작 > 끝 > Promise1 > Promise2 > setTimeout > setTimeout 안의 Promise > setInterval

이런식으로 진행된다.

async-await에서 axios의 원리

async function qqq() {
	await axios.get("url")
}

axios.get이 await를 만나면 마이크로 태스크큐에 들어간다. (axios는 Promise이기 때문)

그 다음 await를 감싸고 있는 함수(qqq)도 마이크로 태스크큐에 들어가게 된다.

axios를 기다리는것처럼 보였을 뿐, axios.get이 먼저 실행되고 뒤에 있던 함수가 실행되는 원리이다.

예시

• setIsSubmitting이 state인데 두 번 실행되는 이유
  true로 바뀐 후, await를 만나 axios.get()이 마이크로 큐에 저장된다.
  감싸고 있는 함수 onClickSync도 마이크로 큐에 저장된다.
  axios로 데이터를 가져온 후, setIsSubmitting도 false로 바뀌게 된다.