Callback
매개변수의 인자로 들어가는 데이터가 함수인 경우, 콜백함수라고 부른다.
(ex) useEffect, setTimeout...)
실행 권한을 다른 함수에게 맡기는 용도로 사용한다.
콜백함수에는 단점이 있다. 콜백이 중첩되는 경우에 코드가 안쪽으로 계속 들어가서 가독성이 떨어지고 유지보수에도 좋지 않게 되는데, 이것을 콜백지옥이라고 한다.
Promise
이러한 콜백함수의 문제점을 개선하기 위해 나온 것이 Promise이다.
promise는 특정 시간이 걸리는 작업들을 처리해주는 도구이다.
resolve에 들어온 값이 then()으로,
reject에 들어온 값이 catch()로 들어가게 된다.
Promise를 사용해서 만들어진 라이브러리가 있다.
=> axios
이렇게 보면 promise도 콜백지옥과 별 다를 것이 없어보이지만 return을 사용해 .then()을 아래에 적어줄 수 있다.
이것을 promise chain이라고 한다.
그러면 promise를 사용하면 될 것 같은데 왜 Async/Await를 사용하는 것일까?
Promise는 promise chain으로 콜백지옥은 개선했으나, 실행 순서를 예측할 수 없다는 단점이 있다.
Async/Await는 100% 순서를 예측할 수 있다.
그렇다면 아무 곳에나 Await를 붙이면 다 기다려주는 것일까?
Await는 promise 앞에 붙여주어야 뒤에 것을 기다려준다.
Async/Await의 동작원리
<!DOCTYPE html>
<html lang="ko">
<head>
<title>이벤트루프</title>
<script>
function onClickLoop() {
console.log("=======시작!!!!=======");
function aaa() {
console.log("aaa-시작");
bbb();
console.log("aaa-끝");
}
async function bbb() {
console.log("bbb-시작");
const friend = await "철수";
console.log(friend);
}
aaa();
console.log("=======끝!!!!=======");
}
</script>
</head>
<body>
<button onclick="onClickLoop()">시작하기</button>
</body>
</html>우리가 예상하는 결과는 이렇다.
=======시작!!!!=======
aaa-시작
bbb-시작
철수
aaa-끝
=======끝!!!!=======하지만 실제 결과는 이렇게 나온다.
=======시작!!!!=======
aaa-시작
bbb-시작
aaa-끝
=======끝!!!!=======
철수await를 만나는 순간 async 안에 있는 function은 하던 일을 중단하고 micro queue에 들어가게 된다.
callstack이 비워지면 다시 queue로 가서 중단되었던 철수가 출력된다.
