[JS] 콜백 함수

비동기 처리 방식에 의해서 발생할 수 있는 문제를 콜백 함수를 사용하여 어느 부분 방지할 수 있다.

 

동기/비동기 처리가 궁금하다면 - [JS] 동기/비동기 처리

[JS] 동기/비동기 처리

 

console.log('front');
setTimeout(() => {
    console.log('middle');
},0)
console.log('back')

이런방식의 코드는 비동기 처리 방식 때문에 코드 작성자의 의도대로 출력되지 않는다.

 

그럼 코드작성자의 의도대로 출력이 되게 하려면 어떤 방식으로 구현하면 될까? 

 

 

답은 콜백함수 방식으로 코드를 작성하면 된다.

 

콜백 함수란 특정 시점에 도달했거나 이벤트가 발생했을 경우에 호출되는 함수를 말한다.

 

 

콜백 함수의 동작 방식은 유명 맛집 식당 자리잡기와 비슷하다.

 

유명 맛집 식당에서 음식을 맛보려면 기본적으로 몇시간씩 대기가 필수이다.

 

대기판에 자신의 이름과 전화번호를 기재해 두면,

 

음식점 앞에서 주야장천 기다리는 것이 아니고

 

쇼핑도 하고 돌아다니면서, 음식점에서 연락이 올때까지 다른 행위를 할 수 있다.

 

음식점에 자리가 생겨 연락이 오게되는 시점이 콜백 함수가 호출되는 시점과 같다고 생각하면 된다.

 

 

js에서의 콜백함수도 이 맥락과 비슷하게 생각하면 될 것이다.

 

 

아래와 같이 콜백함수를 사용하여 코딩을 하게 되면 코드 작성자가 원하던 값을 얻을 수 있다.

 

콜백 함수를 사용하여서 특정 시점이 지난 이후에 해당 함수를 실행시켜 주는 것이다.

 

console.log('front');

const postFunction = (callback) =>{
    setTimeout(()=>{
      console.log('middle'); 
      callback()
    },0)
}

let callback = () => {
    console.log('back');
}

postFunction(callback)

 

콜백함수를 사용하니 원하는 결과가 나오는 모습을 볼 수 있다.

 

 

하지만 콜백함수가 무조건 좋다고 말할 수는 없다.

 

비동기 처리 로직을 위해 콜백 함수를 연속해서 사용하게 되면 가독성도 매우 떨어지게 되고

 

결국  오류가 발생했을 때에 수정도 쉽지 않기 때문이다.

 

아래와 같은 상황을 콜백 지옥 (Callback Hell)이라고 부른다.

 

const addSum = (a,b,callback) => {
    setTimeout(() => {
        return callback(a+b)
    },1000)
}

addSum(1,2,(result1) => {
    addSum(result1,3,(result2) => {
        addSum(result2,4,(result3) => {
            addSum(result3,5,(result4) => {
                console.log(result4)
            })
        })  
    })
})

위와 같이 콜백함수를 연속해서 사용할 수 있다.

 

위의 코드는 단순히 더하기를 계속 반복하는 코드라 사용자가 조금만 유심 있게 보면 로직을 알 수 있지만,

 

실제 서비스에서는 서버에서 간단한 데이터가 아닌 복잡한 데이터를 받아오고 보내주는 경우가 많다.

 

해당 작업들을 모두 비동기 처리를 해야할 경우가 생기기 마련인데,

 

그럴 때마다 위와 같이 콜백 안에 콜백을 계속 사용하는 형식으로 코딩을 하면 

 

난해한 코드가 되고 결국 유지보수성도 떨어지게 된다.

 

결국 콜백 지옥을 해결하는 방법으로 promise 나 Async 를 사용하는 방법이 있다.