📌 자바스크립트 콜백 함수란 ?
콜백(Callback)함수는 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말합니다. 콜백함수는 콜백함수를 전달받은 함수의 의해서 실행됩니다.
즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 됩니다. 아래 예시를 통해 보겠습니다.
예시
const main = (x: () => void) => {
x(); // 매개변수의 함수호출
};
const sayHi = () => {
console.log('안녕');
};
main(sayHi); // 안녕main 함수를 호출할 때 sayHi라는 콜백 함수를 인자로 전달해줬기 때문에 main 함수에 x 매개변수로 sayHi가 들어가게 된겁니다.
이제 main 함수 내부에 있는 코드가 실행이 되면서 우리가 전달해준 콜백함수가 x() 에서 호출이 되는 것입니다.
여기서 중요한점은 우리가 전달해준 sayHi 콜백함수는 main 함수 내부 안에서 구현되는 것입니다.
즉 ! 콜백함수가 언제 어떻게 호출될지는 main 함수 구현의 달려있는 것입니다. 아래의 코드처럼 말이죠.
const main = (x: () => void) => {
console.log('구현중입니다...');
x();
console.log('준비작업 완료...');
};
const sayHi = () => {
console.log('안녕');
};
main(sayHi);
자바스크립트에서 콜백 함수를 사용하는 여러가지 메서드를 사용해왔지만 이 중 Promise를 통해 간략하게 설명하겠습니다.
📌 비동기 작업
설명하기 전 비동기 작업이라는 단어를 설명하고 넘어가겠습니다. 비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고 나머지 코드를 먼저 실행하는 것을 의미합니다. 서버에서 데이터를 불러올 때 오래 걸릴 수도 있는데, 그동안 다른 코드를 실행핮 않고 가만히 기다리면 웹 사이트를로딩하는게 굉장히 오래 걸리기 때문입니다.
비동기 작업을 순차적으로 실행하기 위해서 JavaScript에서는 콜백 함수를 사용합니다. 콜백 함수는 특성 로직이 끝났을 때 원하는 코드를 실행할 수 있습니다. 하지만 콜백에 또 콜백을 계속 호출하게 되면 코드가 복잡해지고 에러 처리도 용이하지 않습니다.
이런 단점을 Promise를 사용해서 해결할 수 있습니다.
📌 Promise
Promise는 비동기 함수가 반환하는 객체입니다. 함수의 성공 또는 실패 상태를 알려줍니다. 콜백을 직접 호출하는 방법 대신, Promise로 콜백을 부를 수 있습니다. 이런 특징 때문에 Promise를 사용하면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고 에러 파악도 편리합니다.
📌 Promise를 생성하는 방법
toss 블로그에서 가져온 예시를 들어보겠습니다.
아래 코드는 결제 코드를 보여주고 있습니다. 리턴 값으로 Promise를 생성하고 있구요!
결제가 요청되기 전에는 promise가 대기(Pending)상태입니다. 결제 요청에 성공하면 Promise 생성 함수에 있는 resolve()메서드가 호출됩니다. Promise가 성공 상태로 바뀌고 data 값을 가지게 되구요. 성공 상태를 가진 Promise는 fullfilled된 상태라고 말합니다.
하지만 결제 요청에 문제가 있다면 reject()를 호출해서 Promise를 실패 상태로 바꾸고 error 데이터를 가지게 됩니다. 실패 상태를 가진 Promise는 rejected 된 상태라고 말합니다.
function requestPayment(paymentData) {
// ...
return new Promise((resolve, reject) { // Pending 상태
if(isSuccess) {
resolve(data) // 성공 상태
}
else {
reject(error) // 실패 상태
}
})
}정리하면 Promise는 세 개의 상태를 가질 수 있습니다!
대기(Pending): 비동기 함수가 아직 시작하지 않은 상태성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태실패(Rejected): 비동기 함수가 실패한 상태
📌 Promise를 처리하는 방법
Promise를 처리할 때는 then() 또는 catch() 메서드를 사용할 수 있습니다. 각 메서드 파라미터에는 콜백 함수를 넣어요!
결제 요청에 성공 상태의 Promise가 반환되면 then()메서드가 호출됩니다. 반대로 실패 상태의 Promise가 반환되면 then() 메서드를 건너뛰고 catch()메서드가 바로 호출됩니다.
아래 toss코드를 예시로 들어보겠습니다. requsetPayment()가 반환하는 Promise를 처리하기 위해 then()과 catch()를 연결해놓은 모습입니다.
- 결제 요청이 성공 ->
then()메서드가 실행. -> 성공 상태의 Promise가 가진 data를 콘솔 출력 - 결제 요청 실패 ->
catch()메서드 실행.then()메서드는 실행x -> 실패 상태의 Promise가 갖고 있는 error 값 호출
즉 then과 catch 시점에서 콜백 함수가 실행되는 모습을 볼 수 있습니다.
paymentWidget.requestPayment({
orderId: "t9JI0Bs1SVdJxRs8yjiQJ",
orderName: "토스 티셔츠 외 2건",
})
.then(function (data) {
console.log(data); // 결제 완료 후 실행
})
.catch(function (error) {
if (error.code == "NEED_CARD_PAYMENT_DETAIL") {
console.log(error.message); // 결제 실패시 실행
}
})Ref
toss - Promise 실전에서 사용해보기
콜백 함수(Callback) 개념 & 응용 - 완벽 정리
별코딩-콜백함수
