[JS] Callback, Promise 그리고 Async/Await

비동기 처리를 동기 처리 하는 방법

동기와 비동기란?

동기적 처리와 비동기적 처리의 차이는 데이터의 요청과 결과가 동시적인지 아닌지에 대한 것이다.

동기적 처리는 서버에 요청을 하면, 얼마가 걸리던 기다려야한다.

예를 들어 치킨을 먹기 위해 치킨을 시켰는데 동기적 처리로 치킨을 시켰으면 치킨이 올때까지 아무것도 못하고 대기 해야한다는 뜻이다.

비동기적 처리는 그 동안 기다리면서 게임을 할 수도 있고, TV를 볼 수도 있고 아니면 둘 다 할 수도 있다는 것이다.

자바 스크립트는 싱글 스레드 언어기에 한번에 한가지 일만 가능하다.

그래서 이를 빨라 보이게 해결하려면 비동기적 처리가 필요한데 예를 들면 라면 끓일때 물을 끓이면서, 쪽파를 좀 썰어놓는다던가 하는 식으로 말이다.

콜백 함수

콜백함수는 특정 시점에 도달하면, 시스템에서 호출해주는 함수이다.

마치 친구 하나를 불러서 나 10분뒤에 전화해줘 랑 비슷한 녀석이라고 할 수 있다.

그런데 많은 콜백을 사용하면 그 친구가 또 다른 친구한테 9분 30초뒤에 전화해줘, 식으로 계속 꼬리를 무는 방식으로 이어지면 결국 누구부터 이어지는지 모르는것과 비슷한것이다.

원래 Callback 함수를 통한 비동기 처리를 동기 처리 하는 과정을 많이 거치는데, 이 과정에서 Callback 패턴을 사용한다.

하지만 Callback 패턴을 사용하면, 함수의 중첩이 많아질수록 가독성이 떨어진다는 단점이 있다.

대충 콜백함수를 많이쓰면..

 

한눈에 보기 어려운 코드는 유지 보수하기도 힘든 문제점을 지니고 있기에,  이런 비동기적 처리에 대해 해결하기 위해 ES6에서는 Promise 라는 키워드가 추가된다.

Promise

ES6에서 추가된 문법으로 Callback 지옥에서 구원해줄 구원투수가 등장했다.

바로 Promise 라는 문법인데, 이를 이용하면 함수 호출이나, 비동기 연산이 완료되면 그 타이밍에 함수가 실행되는 것이다.

콜백 함수에서는 그냥 대략적으로 3분 뒤에 알려줘 였다면, Promise 에선 물이 끓고 나면 알려주는 방식이 된것이다.

Promise 의 3가지 상태

• pending(대기): fulfilled(이행)도 rejected(거절)도 안된 초기 상태
• fulfilled(이행): 비동기 연산이 성공적으로 완료된 상태, 결과값을 반환한다. 
• rejected(실패): 비동기 연산에 실패한 상태, 에러를 반환한다.

참고. Pending 이 아닌 상태를 Settled 된 상태라고 한다.

하지만 Promise 에도 Then 을 여러개 사용시 에러 추적이 어렵다거나, 특정 조건 분기의 어려움을 겪고 있었기에

이후 ES8에선 Async / Await 라는 키워드가 추가되어, Promise 를 더 간단하게 해결해주게 된다.

Async/Await

async function myFunction() {
  try {
    const fulfilledValue = await promise;
  } catch (rejectedValue) {
    // …
  }
}

함수 선언시에 Async 키워드를 붙여주고 Await 를 넣어주면 비동기처리 메서드를 기다렸다가 다음 작업을 수행할 수 있다.

마치 물이 끓으면 이제는 자동으로 스프를 넣는 기능도 생긴것이라고 할 수 있다.

 

 

참고글

https://velog.io/@sik2/JS-Core-%EC%99%80-ES6-%ED%95%9C%EB%B0%A9%EC%97%90-%EB%95%8C%EB%A0%A4%EC%9E%A1%EA%B8%B055

JS | Core 와 ES6+ 한방에 때려잡기_비동기(5/5)

https://velog.io/@syoung125/JS-Promise%EB%9E%80

[JavaScript] Promise란?