2025. 6. 10. 13:39ㆍ코딩/JS
1. 학습 목표
- 콜백 함수의 개념과 사용 목적을 이해한다.
- 콜백 지옥이 무엇이고, 왜 발생하는지 파악한다.
- Promise와 async/await를 활용해 콜백 지옥을 해결하는 방법을 익힌다.
- 실제 코드에서 비동기 처리를 깔끔하게 작성할 수 있다.
2. 핵심 개념 요약
콜백 함수란?
콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수이다.
주로 비동기 처리, 이벤트 처리, 타이머 등에서 사용되며, 특정 작업이 끝난 후에 다음 동작을 실행하는 데 유용하다.
function greet(name, callback) {
console.log("Hi " + name);
callback();
}
function callMe() {
console.log("I am callback function");
}
greet("Peter", callMe);
// Hi Peter
// I am callback function
위 예시에서 callMe 함수는 greet 함수의 인자로 전달되어, greet 함수 실행 후에 호출된다.
콜백 지옥(Callback Hell)이란?
비동기 작업이 연속적으로 필요할 때, 콜백 함수가 중첩되어 코드가 점점 복잡해지는 현상을 콜백 지옥이라고 한다.
이로 인해 코드의 가독성이 떨어지고, 코드의 유지보수가 매우 어려워진다(문제 발생 시 추적의 어려움).
doTaskA(function(resultA) {
doTaskB(resultA, function(resultB) {
doTaskC(resultB, function(resultC) {
// ...
});
});
});
doTaskA, B, C가 순차적으로 진행되어야 한다면, 이런식으로 구현하면 되겠지만 중첩이 되어 콜백지옥이 발생한다.
4. 해결방안
두 가지의 해결방안이 존재한다. promise와 async/await
4-1. Promise
Promise는 비동기 작업의 결과를 처리하기 위한 객체로, .then() 체이닝을 통해 콜백의 중첩 없이 순차적 실행이 가능하다.
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
delay(1000)
.then(() => {
console.log("첫 번째 작업 완료");
return delay(1000);
})
.then(() => {
console.log("두 번째 작업 완료");
return delay(1000);
})
.then(() => {
console.log("세 번째 작업 완료");
});
Promise를 통해, 순차적으로 함수 진행이 가능하고, return delay(1000) 을 통해 반환된 Promise를 .then()에게 넘겨준다.
실패한 경우 .catch를 명시해 실패결과를 받아 처리할 수 있다.
Promise는 결과가 나오기 전: pending, 성공적으로 실행된 경우 : fulfilled, 실패한 경우 rejected 3가지의 상태 중 하나를 가진다.
이러한 방식으로 Promise는 콜백 지옥을 해결하고, 코드의 가독성을 높여준다.
4-2. async/await
이를 통해, Promise를 더 쉽게 다룰 수 있고 동기처럼 보이는 코드에 의해 가독성도 증가한다.
try/catch를 사용해 예외처리 await사용 시 병렬 실행 대신 직렬 실행이 된다.
async function process() {
await delay(1000);
console.log("첫 번째 작업 완료");
await delay(1000);
console.log("두 번째 작업 완료");
await delay(1000);
console.log("세 번째 작업 완료");
}
process();
.then 대신 await로 보다 직관적으로 표현할 수 있다.
5. 요약
- 콜백 함수: 다른 함수의 인자로 전달되어 실행되는 함수. 비동기 처리에 자주 사용된다
- 콜백 지옥: 콜백이 중첩되어 코드가 복잡해지는 현상. 가독성과 유지보수에 악영향.
- 해결 방법: Promise와 async/await를 활용해 콜백 지옥을 피할 수 있음.
6. 참고 자료
3.3 콜백 지옥과 콜백 헬 방지 방법
### 3.3 콜백 지옥과 콜백 헬 방지 방법 콜백 지옥(callback hell)은 콜백 함수를 중첩하여 사용할 때 코드가 복잡해지고 가독성이 저하되는 현상을 말합니다. 비…
wikidocs.net
'코딩 > JS' 카테고리의 다른 글
TS 상수다루기 enum, as const(const assertion) (2) | 2025.06.14 |
---|---|
AJAX (Asynchronous JavaScript and XML) 부록: CORS (1) | 2025.06.10 |
디바운싱과 쓰로틀링 (5) | 2025.06.09 |
JS 모듈 패턴 + Dynamic Import (1) | 2025.05.15 |
문자열 원하는 글자로 채우기 padStart, padEnd (1) | 2025.05.15 |