[JS] 콜백함수

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

(수근수근)

[JS] 콜백함수 본문

type & Javascript

[JS] 콜백함수

InformationFarm 2021. 9. 15. 10:08

😲 callback함수란

javascript콜백 함수란 이름 그대로 나중에 호출되는 함수를 말한다.

문법적 특징이 따로 존재하는게 아니라 자바스크립트의 함수일 뿐이다.

MDN 정의에 따르면 콜백 함수는 다른 함수에 인자로 전달되는 함수이며, 외부 함수 내에서 일종의 루틴 또는 동작을 실행하기 위해 호출된다.

🤦🏻 CallBack 함수의 예시

콜백함수라 해서 어마무시한 함수라고 생각할 필요없다,

예를 들어 콜백함수의 대표적인 사용은 addEventListener이다.

우리가 어떤 버튼이 클릭되었을 때 콘솔 창에 버튼이 클릭되었음 이라는 기능이 작동되게 해보자

<!DOCTYPE html>
<head>...생략<head>
<body>
    <div>
      <button id='log_button'>로그출력</button> 
  </div>
</body>
<script>
    const button = document.getElementId('log_button');

    //익명함수로써 콜백함수 전달
    button.addEventListener('click', ()=>{
        console.log('callback test')
    })
</script>

우리가 흔히 쓰던 addEventListener 뿐만 아니라 비동기 함수의 대표적인 setTimeout()함수도 콜백함수를 필요로 한다.

setTimeout(()=>{
    console.log('callback test');
},100);

다음은 100ms이후에 콘솔 'callback test' 라는 문자열을 찍을 것이다.

🆚Callback 함수 vs 비동기 함수

콜백과 비동기함수와 같은 말일까? 뭔가 헷갈리기 시작했다.

결론적으로는 다르다. 우리가 자바스크립트에서 비동기적으로 프로그래밍하기 위해 콜백함수를 사용하는 것이지 콜백함수가 비동기라 콜백함수를 사용하는 것이 아니다.

그렇다면 우리는 언제 비동기 함수가 필요한 것인가?

비동기함수 테크닉의 사용 예

사용자 이벤트 처리
네트워크 응답처리
파일 읽고 쓰는등 파일 시스템의 작업
의도적으로 시간을 지연하는 기능 (알람)

📝콜백함수의 사용이유

예시를 통해 콜백함수의 필요성에 대해 깨달아 봅시다.

function getData() {
    let data;
    $.get('url/param', function (response) {
        data= response;
    });
    return data;
}

console.log(getData()); // undefined

맨 아래의 콘솔에서 우리는 ajax를 통해 가져온 데이터를 출력하기를 원합니다.

하지만 실제 실행 값은 undefined입니다. 왜 그러는 걸까요.....?😒😒😒😒😒

‼️이유는 위에서 비동기테크의 방법 중 네트워크 통신을 함수인 get은 비동기 함수이기 때문입니다. get을 통해 데이터를 가지고 오는 시간동안 console.log() 함수가 출력되는 것이고 당연히 데이터는 아직 없는 상태입니다.

콜백함수를 사용하여 이러한 문제점을 해결해봅시다!

function getData(callback) {
    $.get('url/param', function (response) {
        callback(response); // 서버에서 받은 데이터를 callback함수에 넘겨줌
    });
}

getData(function (data) {
    console.log(data); 
});

콜백함수를 사용하였더니 get비동기 함수에서 네트워크 통신을 통해 response 받아온 이후에 callback함수를 실행하고 이를 통해 콘솔에 제대로 된 데이터 값을 전달할 수 있습니다.

😡 콜백지옥

콜백함수는 위처럼 비동기적인 기능을 하기에 간편하고 표준적인 방법입니다. 하지만 서비스가 복잡해 질수록 비동기함수가 비동기를 호출하고 하는 중첩에 빠지게 되고 이를 콜백지옥이라고 합니다.

callback1(function(value1) {
  callback2(value1, function(value2) {
    callback3(value2, function(value3) {
      callback4(value3, function(value4) {
        callback5(value4, function(value5) {
            // value5를 사용하는 처리
        });
      });
    });
  });
});

비동기 동작이 추가될때마다 중첩 호출이 만들어내는 피라미드 손쓸 수 없이 커져버리고 잘 동작이 된다 하더라고 차후에 유지보수를 하거나 기능 추가를 하는 경우 엄청난 난제로 자리잡게 됩니다.

이를 해결하기 위해 Promise/ async, await 라는 해결방안을 ECMAScript에서 표준화하였습니다.

'type & Javascript' 카테고리의 다른 글

[NodeJS] Nodejs 기초 (0)	2021.10.01
[JS] JSON데이터 CSV파일로 저장 (0)	2021.09.26
[JS] expression & operator (0)	2021.09.11
변수와 상수 (0)	2021.09.11
식별자와 Value (0)	2021.09.01