Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- firebase 라이브러리
- s3 upload
- 리액트 네이티브 에러
- React
- aws bucket 정책
- AWS
- PongWorld
- Next.js
- 리엑트 네이티브 아이콘
- 에러
- error
- babel.config.js
- react native
- 리액트 네이티브
- react native picker
- GIT
- 문자열 대소문자 구별
- fire base
- img upload
- js
- react native font
- 리액트
- AWS Access Key
- 백준
- react native CLI
- react native 개발
- Project
- Access Key 생성
- 문자열 대소문자
- react native 세팅
Archives
- Today
- Total
밝을희 클태
콜백 지옥이란 그리고 해결법 본문
콜백 지옥?
주로 비동기 작업을 순차적으로 실행하기 위해 여러 콜백 함수가 중첩되는 경우 발생한다.
비동기 작업에서는 각 작업이 완료된 후에 다음 작업을 수행해야 할 때가 많다. 이때 콜백 함수를 계속 사용하다 보면 코드의 들여쓰기가 깊어지고 중첩되면서 가독성이 떨어지고, 유지보수가 어려워지는 문제가 생긴다. 이를 콜백 지옥이라고 부른다.
콜백 지옥 예시
아래 코드는 첫 번째 작업이 완료된 후 두 번째 작업이 실행되고, 세 번째 작업이 순차적으로 실행되도록 작성되었다. 하지만 작업이 순서대로 진행되도록 보장하기 위해 콜백 함수가 중첩되면서 코드의 가독성이 떨어지게 된다.
setTimeout(() => {
console.log("첫 번째 작업 완료");
setTimeout(() => {
console.log("두 번째 작업 완료");
setTimeout(() => {
console.log("세 번째 작업 완료");
}, 1000);
}, 1000);
}, 1000);
Promise를 이용한 해결
Promise를 사용하면 코드 중첩을 피하고, 비동기 작업의 순서를 더 명확하게 표현할 수 있다. 아래 코드는 각 작업을 Promise로 감싸고 체이닝을 통해 순차적으로 실행한다.
const doWork = (onWork = () => {}, time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
onWork();
resolve();
}, time);
});
};
doWork(() => console.log("첫 번째 작업!"), 1000)
.then(() => doWork(() => console.log("두 번째 작업!"), 1000))
.then(() => doWork(() => console.log("세 번째 작업!"), 1000));
에러가 발생할 수 있는 상황
Promise 체이닝에서도 에러가 발생하면 복잡해질 수 있다. 에러를 처리하기 위해 catch()를 사용하면 코드가 다소 지저분해 보일 수 있다.
const doWork = (onWork = () => {}, time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
onWork();
resolve();
} catch (error) {
reject(error);
}
}, time);
});
};
doWork(() => console.log("첫 번째 작업!"), 1000)
.then(() => doWork(() => console.log("두 번째 작업!"), 1000))
.catch((error) => console.error("두 번째 작업 에러:", error))
.then(() => doWork(() => console.log("세 번째 작업!"), 1000))
.catch((error) => console.error("세 번째 작업 에러:", error));
async/await를 이용한 해결
async/await를 사용하면 코드가 더 직관적이 되고 가독성이 크게 개선된다. 비동기 작업이 마치 동기 작업처럼 순차적으로 실행된다. 또한 에러 처리는 try/catch로 깔끔하게 처리할 수 있다.
const doWork = (onWork = () => {}, time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
try {
onWork();
resolve();
} catch (error) {
reject(error);
}
}, time);
});
};
const run = async () => {
try {
await doWork(() => console.log("첫 번째 작업!"), 1000);
await doWork(() => console.log("두 번째 작업!"), 1000);
await doWork(() => console.log("세 번째 작업!"), 1000);
} catch (error) {
console.log(error);
}
};
run();
결론
콜백 지옥은 비동기 작업을 순서대로 실행하기 위해 콜백 함수가 중첩될 때 발생한다. 이를 해결하기 위해 Promise와 async/await를 사용할 수 있다.
- Promise는 비동기 작업의 순서를 체이닝을 통해 명확히 하고, 중첩을 피할 수 있게 해준다.
- async/await은 비동기 코드를 동기 코드처럼 직관적으로 작성하게 해주며, 에러 처리를 간소화한다.
이제 콜백 지옥 문제는 Promise나 async/await을 사용해 보다 가독성 좋게 해결할 수 있다.
'JavaScript' 카테고리의 다른 글
[ JavaScript ]자바스크립트는 싱글 스레드인데 어떻게 멀티 스레드처럼 동작을 할까? (3) | 2024.08.28 |
---|---|
[ JS ] searchParams 다루기 (0) | 2024.07.06 |
[ JavaScript / TypeScript ] Debounce 함수 구현 (0) | 2024.05.12 |
[ JavaScript ] 렉시컬 스코프(Lexical Scope)와 렉시컬 환경(Lexical Environment) (0) | 2024.05.11 |
[ TypeScript / JavaScript ] DOM 객체 타입 (0) | 2024.05.04 |