[자바스크립트 비동기 문법] 콜백지옥🔥🔥과 콜백지옥을 해결할 Async Await 💊💊

안녕하세요  오늘은 비동기 작업에서 발생한 콜백지옥과 콜백지옥을 해결할 Async Await 에 대해 알아보겠습니다. 

목차
1. 콜백지옥
1-1. 콜백지옥이란?
1-2. 콜백지옥 예시 코드
1-3. 콜백지옥 해결방법
1-4. ES8 에서 추가된  Async Await  문법을 사용한 콜백지옥 해결 코드

 

서론

먼저 "콜백지옥" 이라는 단어를 들었을 때 어떤 생각이 떠오르시나요?  "지옥" 이라고 붙으면 뭔가 불길하고 부정적으로 느껴지시죠?  프로그래밍에서도 "콜백지옥" 도 마찬가지로 코드의 구조가 그렇게 썩 좋지 않다고 생각하시면 됩니다. 그럼 본론으로 넘어가시죠

본론

1. 콜백지옥

 

1-1. 콜백지옥이란?

비동기 작업을 처리할 때 발생하는 문제로, 콜백 함수가 너무 많이 중첩되어 코드의 가독성이 떨어지고 유지보수가 어려워지는 현상을 뜻합니다. 

 

1-2. 콜백지옥 예시 코드

callback(() => {
    console.log("안녕");
    callback2(() => {
        console.log("안녕");
        callback3(()=> {
        console.log("안녕");
            callback4(()=> {
            console.log("안녕");
                callback5(()=> {
                console.log("안녕");
        })
        })
        })
    })
})

이렇게 콜백 함수 안에 또 콜백 함수를 작성하고 그 안에 다시 콜백 함수를 작성하면서  코드가 뭔가 Arrow(활) 처럼 휘어지는 현상이 나타납니다. 이렇게 콜백 함수가 너무 많이 중첩되어 코드의 가독성이 떨어지는 것이  콜백지옥 입니다. 

 

 Async Await이 추가되기 전에는 Promise로  해결할 수 있었습니다. Promise로 해결할 수 있는 한계점을 극복하기 위해 ES8 에서 추가된 Async  Await 문법을 통해 콜백 지옥을 해결할 수 있게 되었습니다.

 

1-3. 콜백지옥 해결방법

1-4. ES8 에서 추가된  Async Await  문법을 사용한 콜백지옥을  해결한  코드

// async 구문이 함수의 앞에 붙게되면 promise를 반환하는 함수
// await promise의 대기상태가 끝날때까지 대기
//  const data =  await promise();  -> await 대기상태가 끝난후에 결과값을 반환
const dataFetch = async () => {
    // 데이터가 정상적으로 받아졌을 때
    // await는 promise의 내용이 정상적으로 처리될때 까지 기다린다.
    // await [작성한 promise] 대기상태가 끝날때까지 대기
   const data =  await promise(); 
}

 

결론

 

 Async Await 문법을 사용하면  콜백 지옥을 해결하고 비동기 코드의 가독성, 유지보수성, 오류 처리 능력을 향상시키는 데 효과적인 방법일 수 있습니다.  이상입니다!!