[북털] Promise와 Callback의 차이

JS는 항상 동기식 처리이다. 즉 한 번에 한 줄씩 차례로 실행된다는 이야기이다.

JS를 실행하는 웹 브라우저는 stack이라는 코드 실행공간이 있는데 거기서 코드를 한 줄씩 차례로 실행한다.

 

예외의 경우가 있는데 시간이 오래 걸리는 코드는 stack에서 제외시켜 Web API라는 곳에서 저장시키고 나중에 code를 실행시킨다. -> Ajax, setTimeout, eventListner

이런 처리방식을 바로 비동기(asynchronous)라고 한다.

이건 JS 언어 자체의 기능이 아니라 JS 실행을 도와주는 웹 브라우저 덕분에 할 수 있는 것이다.

 

 

Javascript에서 비동기 처리를 위해 Promise와 Callback 함수가 자주 등장한다.

 

 

Callback 함수

함수 안에 들어가는 함수를 callback 함수라고 한다.

 

# 자바스크립트에서 5초 후에 코드를 실행하고 싶을 때

console.log(1);
setTimeout(function(){
  console.log(2);
}, 5000);
console.log(3);

콘솔 창에는 1과 3이 먼저 출력되고 2가 5초 뒤에 출력이 된다.

 

 

하지만 callback 함수가 많아지면 callback 지옥에 빠지기도 한다. (아래 사진 첨부)

코드가 훨씬 간결해져 가독성이 좋아지는 것은 Promise이기 때문에 Promise 사용을 더 권장한다. 

 

Callback 지옥

이렇게 코드가 길어지는 모습을 Callback 지옥이라고 한다.

 

 

Callback 함수를 보기 좋게 하기 위해서 Promise를 사용하게 된다.

Callback

first(function(){
  second(function(){
    thrid(function(){
      ... // 위와 같이 callback 함수의 연속은 좋은 code 가 아니게 됨
    });
  });
}):

Promise

first().then(function(){
   // second 에서 실행 할 코드
}).then(function(){
   // third 에서 실행할 코드 
});

 

Promise

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다.

데이터를 받아오기도 전에 데이터를 다 받은 것처럼 화면에 표시하려고 하면 오류가 발생할 수 있다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.

 

 

Promise를 쓰는 이유

코드 성공, 실패의 경우에 맞춰 각각 다른 코드를 실행 가능하다.

이것에 대해 Promise는 3가지 상태를 갖는다.

성공하면 <resolved>

판정대기 중이면 <peding>

실패하면 <rejected>

 

! promise는 비동기적 처리가 가능하게 바꿔주는 문법이 아니다.

 

 

async/await

- ES8 문법에 Promise 를 대체할 async / await 키워드를 통해 쉽게 Promise 객체를 생성하고 then, catch 를 대신해서 사용할 수 있다.

- async 를 function 앞에 붙이면 함수가 Promise 역활을 하게 되는 것이다

- 즉, async 를 function 앞에 붙이면 함수 실행 후에 Promise object 가 남게 된다.

- then 대신에 사용이 가능한 await는 말그대로 기다려 달라는 것인데, 비동기적으로 처리를 할때 Promise 를 해결 할때 까지 기다리라는 의미이다.

- 단! await 은 async 안에서만 사용할 수 있는 키워드이다. await 은 Promise 가 실패 시 에러가 나고 멈춘다.

- 실패시 멈춤을 방지 하고자 try{} catch{} 구문을 사용한다.

 

 

예제)

버튼을 누르면 Promise, 성공/실패 판정

async function cal() {
  const Btn = new Promise((resolve, reject) => {
    const button = document.getElementById('btn');
    button.addEventListener('click', () => {
      resolve('Pass');
    })
  });

  try {
    const result = await Btn;
    console.log(result);
  } catch {
    console.log('Fail')
  }
}


cal();

 

 

 

 

참고 블로그:

https://jacobko.info/javascript/ES6_11/

21.비동기 (callBack, Promise, async / await) - ES6

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기