promise(프로미스)의 개념에 대해서 설명하고, 콜백 함수 방식과 차이점을 설명해주세요.
Promise란?
자바스크립트에서는 여러 함수의 사용으로 비동기 동작을 스케줄링 할 수 있다. 이는 원하는 때에 동작이 실행될 수 있도록 만들어줄 수 있다는 것을 의미한다. 프로미스는 자바스크립트의 비동기처리에 사용되는 객체이다.
자바스크립트의 제작코드는 원격에서 스크립트를 불러오는 것 등의 시간이 걸리는 일을 하고, 소비코드는 제작코드의 결과를 기다렸다가 이를 소비한다. 이 중간에서 제작코드와 소비코드를 연결해주는 객체가 바로 promise이다. promise는 시간의 경과에 상관없이 제작코드가 준비되었을 때, 모든 소비코드가 결과를 사용할 수 있도록 만들어준다.
Promise의 3가지 상태
- pending : 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태
- fulfilled : 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- rejected : 실패 - 비동기 처리가 실패하거나 오류가 발생한 상태
Promise의 생성과 사용
function getData(callback) {
// new Promise() 추가
return new Promise(function(resolve, reject) {
$.get('url 주소/products/1', function(response) {
// 데이터를 받으면 resolve() 호출
resolve(response);
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});promise내부의 executor의 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이고, 시간이 얼마가 걸리든 resolve나 reject를 반드시 호출해주어야 한다.
resolve는 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출하면 되고, reject는 에러발생 시 에러를 나타내는 error와 함께 호출하면 된다.
생성함수에서 promise로 연결해놓은 결과는 .then, .catch, .finally로 소비함수에 연결될 수 있다.
then의 첫번째 인자는 프로미스가 이행되었을 때 실행되는 함수이고, 실행결과를 받는다. 두번째 인자는 프로미스가 거부되었을 때 실행되는 함수이며 에러를 받는다.
콜백함수와의 차이점
callback함수는 다른 함수의 인수로 넘겨줌으로써 실행 가능한 코드를 의미한다. 이때문에 callback함수로도 비동기 처리를 해줄 수가 있는데, 그 방법은 아래와 같다.
어떠한 비동기 로직이 끝났을 때, 인자로 받은 callback함수를 실행하면 된다.
const callbackAsync = (callback) => {
setTimeOut(() => {
callback()
}, 1000)
}
callbackAsync(() => {
console.log('안녕')
})
//1초 뒤에 안녕이 찍힌다. 이런 callback함수와 promise의 차이점은 다음과 같다.
- callback함수의 비동기 로직의 결과값 처리는 callback안에서만 할 수 있고 callback 밖에서는 결과값을 알 수 없지만, promise는 비동기 로직에서 처리된 결과값이 promise객체에 저장되기 때문에 비동기 로직 밖에서도 사용이 가능하다.
- 또한 callback함수는 함수 내부에서 호출하고 또 그 함수 내부에서 호출하는 방식으로 작성이 되기 때문에 가독성이 떨어지지만, promise를 사용하면 .then으로 이어줘 callback보다 가독성이 좋다.
