CallBack
콜백함수는 진짜 JS를 처음 공부 했을 때 제일 이해가 안갔던 부분이었다. 정의 자체는 다른 함수의 인자로로 이용되는 함수를 의미하는데 이게 막상 글로 보니깐 이해가 안됐었다. 쉽게 말해서 함수를 등록하기만 하고 내가 필요할 때 호출하는 함수 정도라고 정의할 수 있다.
더 쉽게 설명 하자면 다른 함수가 실행을 끝낸 뒤 실행해줘!!! 라고 생각하면 이해하기 편하다...
먼저 콜백함수를 사용하는 이유는 무엇일까? JS는 기본적으로 비동기 방식으로 동작한다. 그래서 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요해서 사용한다. 물론 콜백함수 자체를 꼭 비동기 방식을 동기 처리하려고 쓰는것은 아니다 콜백함수에도 비동기 처리방식과 동기 처리 방식으로 나뉜다.
* 동기: 하나의 요청이 오면 그 요청을 완료 한 후 다음 요청을 실행
* 비동기: 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행
예제
<html>
<body></body>
</html>
<script>
function buyCoffe(
coffeeName,
price,
quantity,
callback,
callback22,
callback3
) {
//커피를 사는 행위
console.log(`${coffeeName}를 ${quantity}개 구입하려고합니다.`);
console.log(`${coffeeName} 한 개 ${price}원 입니다.`);
setTimeout(() => {
//return price * quantity
callback(quantity);
callback22(price * quantity);
callback3(coffeeName);
}, 1000);
}
// buyCoffe('아메리카노',5000,3)
function pay(money) {
// 커피값 계산결과 출력 함수
console.log(money, "원을 지불하였슴다");
}
function quantity(num) {
//주문 수량출력 함수
console.log(`주문하신 수량은, ${num} 개 입니다.`);
}
function pay(money) {
// 커피값 계산결과 출력 함수
console.log(money, "원을 지불하였슴다");
}
function coffeeName(name) {
console.log(`이거는 , ${name} 입니다.`);
}
buyCoffe("아메리카노", 5000, 3, quantity, pay, coffeeName);
</script>위와 같이 구매자가 커피를 사고 계산을 하고 커피를 받는 행위를 콜백함수를 이용해서 동기적으로 작성 할 수 있다.
그렇다면 비동기 처리 방식을 동기적으로 표현하고 싶을 때 무조건 콜백함수를 사용하면 되는것이 아니냐? 라고 했을 때는 그것은 또 아니다 이다. 그것은 콜백함수의 치명적인 단점인 .. 콜백지옥에 빠질 수 도 있기 때문이다.
콜백 지옥
콜백 지옥은 비동기 처리방식을 동기 처리 방식으로 만들려고 콜백을 반복 사용했을 때 발생하는 문제로 콜백안에 콜백이 계속 반복 되어 코드의 들여쓰기가 진짜 감당하기 힘들정도로 깊어지는 현상을 말한다. 가독성이 너무떨어지고 코드를 수정하기가 어렵다.
이 콜백 지옥을 탈출하기 위해서는 Promise와 async/await 등 방법이 있다. 이것에 자세한 내용은 나중에 포스팅 하도록 하겠다.
'개발 > JS' 카테고리의 다른 글
| [JS] 구조분해할당 (0) | 2022.07.12 |
|---|---|
| [JS] Template Literals (0) | 2022.07.07 |