JavaScript 비동기(2) - 콜백

 

 

 

 

콜백 활용

function timer(callback) {
    setTimeout(()=>{
        console.log(1)
        callback() // 받아온 callback함수를 여기서 실행
    },2000)
}

timer(()=>{
    console.log('Hello World')
})

timer(()=>{
    console.log('안녕하세요')
})

timer(()=>{
    console.log('[ERROR] 403 Forbidden')
})

   - 비동기 작업 도중에 콜백 함수를 사용할 수 있습니다.

   - callback 매개변수로 다른 함수를 받아와서 비동기함수 내 원하는 부분에서 실행시킬 수 있습니다.

   - 특정한 비동기 함수 틀에 여러가지 바리에이션을 적용할 수 있습니다.

 

 

 

 

콜백 지옥

function timer(callback) {
    const ImgEl = document.createElement('img')
    imgEl.src = 'Img 링크'
    imgEl.addEventListener('load', ()=>{
    	callback() // 받아온 callback함수를 여기서 실행
    }
}

// 순서가 일정하지 않습니다.
timer(()=>{
    console.log('timer1')
})
timer(()=>{
    console.log('timer2')
})

timer(()=>{
    console.log('timer3')
})


// timer1 timer2 timer3 순서로 출력됩니다.
timer(()=>{
    console.log('timer1')
    timer(()=>{
        console.log('timer2')
        timer(()=>{
            console.log('timer3')
        })
    })
})

   - 여러 비동기 함수를 사용하면 도착하는 순서가 일정하지 않아 순서가 뒤죽박죽으로 꼬이게 됩니다.

   - 이때문에 순서를 맞추기 위해 콜백 안에 함수를 넣어 동기적으로 만들 수 있습니다.

   - 다만, 들여쓰기를 통해 콜백 - 콜백 - 콜백 - ... 이 반복되는데, 이를 콜백지옥이라 합니다.

   - 과도한 콜백 지옥은 가독성과 유지보수성을 떨어뜨리게 되므로 가급적 지양하는것이 좋습니다.

   - 콜백지옥을 해결하기 위해 Promise를 사용할 수 있습니다.