[JavaScript] 콜백함수를 활용한 비동기 작업 처리

 

 

콜백함수를 활용한 비동기 작업 처리

 

 

 

 

sum의 값을 add 함수 밖에서도 이용할 수 있게 하는 방법

 

- 비동기 처리의 결과 값을 사용하고자 하는 콜백함수를 전달해주면 됨

 

 

 

 

 

실행 순서

 

1.  add 함수 호출

2. setTimeout 함수 호출

3. 3초 뒤 callback 함수 호출

4. sum 값 계산

5. 매개변수로 받은 콜백함수를 sum 값으로 호출

6. console.log에 출력 

 

 

function add(a,b,callback) {
    setTimeout(()=> {
        const sum = a+b
        callback(sum)
    }, 3000)
}

add(1,2,(value) => {
    console.log(value)
})

 

 

 

 

 

 

예제

 

- 비동기 작업의 결과를 또다른 비동기 작업에 추가

 

 

1. 음식 주문

 

function orderFood(callback) {
    setTimeout(()=> {
        const food = "피자" 
        callback(food)
    },3000)
}

orderFood((food) => {
    console.log(food)
})

 

 

 

 

 

2. 음식을 식히는 비동기 작업 추가

 

 

 

function orderFood(callback) {
    setTimeout(()=> {
        const food = "피자" 
        callback(food)
    },3000)
}


function cooldownFood(food, callback) {
    setTimeout(()=> {
        const cooldownedFood = `식은 ${food}`
        callback(cooldownedFood)
    }, 2000)
}

orderFood((food) => {
    console.log(food)

    cooldownFood(food, cooldownedFood => {
        console.log(cooldownedFood)
    })
})

 

 

 

 

 

 

3. 음식을 얼리는 비동기 작업 추가

 

 

 

function orderFood(callback) {
    setTimeout(()=> {
        const food = "피자" 
        callback(food)
    },3000)
}


function cooldownFood(food, callback) {
    setTimeout(()=> {
        const cooldownedFood = `식은 ${food}`
        callback(cooldownedFood)
    }, 2000)
}


function frozenFood(food, callback) {
    setTimeout(() => {
        const frozendFood = `냉동 ${food}`
        callback(frozendFood)
    }, 3000);
}

orderFood((food) => {
    console.log(food)

    cooldownFood(food, cooldownedFood => {
        console.log(cooldownedFood)

        frozenFood(food,frozendFood => {
            console.log(frozendFood)
        })
    })
})

 

 

 

- 하지만 비동기 작업의 결과를 또다른 비동기 작업에 추가하는 것은

- 코드가 많아질수록 코드의 가독성을 해침 (콜백 지옥) 

- 이를 해결하기 위해선 promise를 사용함

 

 

 

 

출처 ) 인프런 : 이정환 - 한입 크기로 잘라 먹는 리액트 강의