자바스크립트에는 비동기 실행 이라는 것이 있다.
비동기 실행을 이해하기 위해서 다같이 한번 생각해 보자.
사용자가 화면에서 서버로 데이터를 요청을 했는데 그 요청을 언제 응답을 줄지 모른다면 어떨까? 마냥 다른코드를 실행안하고 가만히 있을 수는 없을 것이다.
요청을 다 수행될 때까지는 어플리케이션이 제대로 동작될 수가 없음.
이러한 순간 필요한 것이 바로 비동기 실행이다.
그 비동기 실행을 구현하기 위해 callback을 사용하고, 그 callback의 수 많은 단점을 보완하기 위해 나온 것이 Promise다.
CallBack함수란?
콜백함수는 다른함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말한다.
그리고 함수를 만들 때, 파라미터를 함수로 받아서 쓸 수 있는데 그 함수는 callback이다.
조금 더 자세히 말하면 js에서 함수는 object라고 한다. 그래서 함수는 다른 함수의 인자로 쓰일 수도 혹은 어떤 함수에 의해 리턴될 수도 있다. 이런 함수를 고차 함수라고 한다. 결국, 인자로 넘겨지는 함수를 콜백함수라고 한다.
함수를 미리 등록해 놓고 어떤 이벤트가 발생했거나 특정시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
예제를 함께 보자
const func = (callback) => {
callback()
}
const callback = () => {
console.log("Callback")
}func(callback); // 결과 : Callback
콜백함수의 기본형태이다. 함수 func를 호출했을 때, 밑에있는 특벙 callback함수가 실행된다.
콜백함수가 필요한 이유에 대해 조금 더 자세한 설명이 필요하다면 이전 글인 callback 글을 참조하기 바란다.
Promise란?
Promise는 then()과 같은 메소드를 연속적으로 사용할 수 있고 callback을 사용했을 때와는 다르게 콜백지옥에 빠질일이 없다.
비동기적 처리의 방안인 이 promise!! 는 3가지 상태가 있다.
상태
- pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태
- fullfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) - 비동기 처리가 실패하거나 오류가 발생한 상태
장점
후속 처리 메소드를 체이닝해 여러개의 promise를 연결하여 사용할 수 있음. (콜백지옥이 해결 됨) 상대적으로 가독성이 떨어지는 callback패턴을 대체하여 async함수도 sync함수인 것 같이 코드를 작성할 수 있음.
