콜백 함수

📍 콜백이 뭘까?

콜백함수는 자바스크립트에서 비동기 작업을 처리하는 가장 기본적인 방법 중 하나이다. 다른 함수에 인자로 전달되어 나중에 호출되는 함수인데, 어떤 이벤트나 조건이 발생했을 때 실행되도록 하는 것이 콜백 함수의 기본적인 방식이다.

function fetchDataFromServer(callback) {
  setTimeout(() => {
    const data = "서버에서 받은 데이터";
    callback(data); // 콜백 함수 호출
  }, 2000);
}

fetchDataFromServer((data) => {
  console.log("데이터 받음:", data);
  // 받은 데이터를 사용하여 추가적인 작업 수행
});

위 코드를 실행 시키면 2초 후에 ‘데이터 받음: 서버에서 받은 데이터’가 출력된다.

📍 어려웠던 점(1)

콜백 함수가 함수의 매개변수 자리에 들어가서 헷갈렸던 부분이 있다.
매개변수를 인자로 받는 함수와 콜백함수를 인자로 받는 함수의 코드를 비교해보면 명확히 다르게 보인다. 콜백함수를 사용하는 코드를 보면 함수 안에서 또다른 함수(콜백함수)를 호출하고 있다.

// 단순히 함수를 정의함 
function add(x, y) {
return x + y;
}

// process 함수와 콜백함수를 정의함
function process(callback) {
  callback(); 
}

function myCallback() {
  console.log('콜백 함수가 실행됨');
}

📍 어려웠던 점(2)

아래 코드는 직관적으로 짜여있어서 콜백함수를 이해하기 쉬웠다.
*재사용성과 가독성이 중요한 상황에서는 명명된 함수를 별도로 정의하는 방식을 사용

function example(callback) {  //함수 생성
  setTimeout(() => {
    console.log("안녕하세요");
  }, 2000);
  callback();
}

function cbexample() {     //콜백함수로 사용될 함수 정의
  setTimeout(() => {
    console.log("반갑습니다");
  }, 2000);
}

example(cbexample);    //콜백함수를 인자로 넣어 함수 호출

반면에 아래 코드도 콜백함수를 사용한 코드인데.. 왜 다른 것 같지??
콜백함수로 사용될 함수가 정의되는 부분이 없고 바로 호출해버린다.
호출하는 부분에서 함수의 인자로 (data) => { console.log("데이터 받음:", data); }가 들어가는데, 이게 콜백함수를 정의하면서 호출하는것이라고 한다.
*단순하고 일회성인 경우에는 익명 함수를 직접 전달하는 방식을 사용

function fetchDataFromServer(callback) {
  setTimeout(() => {
    const data = "서버에서 받은 데이터";
    callback(data); // 콜백 함수 호출
  }, 2000);
}

fetchDataFromServer((data) => {
  console.log("데이터 받음:", data);
  // 받은 데이터를 사용하여 추가적인 작업 수행
});

콜백 함수를 이해하는데 오래걸렸다. 이해가 된 것 같다가도 조금만 구조가 다른 코드를 보면 다시 원점으로 돌아가는 느낌 ..! 아직 부족하지만 그래도 콜백함수를 제대로 알아야 promise, async/await도 이해할 수 있으니 계속 공부해 봐야겠다.

#코딩독학 #코딩인강 #코딩배우기 #개발자 #코딩이란 #코딩교육 #프론트엔드부트캠프 #백엔드부트캠프 #국비지원부트캠프 #개발자 #백엔드 #AI부트캠프 #개발자국비지원 #백엔드개발자 #프론트엔드개발자