javascript / 콜백함수를 쉽게 설명해봤다.(callback function)

콜백함수(callback function)

 

콜백(callback)이라는 단어의 뜻만 본다면 "회신"이라는 의미를 가지고 있다.

 

---

콜백 함수의 정의 - 함수에 파라미터로 들어가는 함수

 

이러면 내용이 어려우니 한 번 더 상세히 들어가보면

 

  파라미터(parameter)란 한글로 매개변수 라는 뜻

  매개변수란 함수에 입력되는 데이터 중 하나를 가르키는데 사용되는 말

  매개란 뜻은 둘 사이의 양편의 관계를 맺어준다는 의미를 가지고 있으며

  변수(variable)란 변하는 수, 즉 계속해서 변하는 수 라는 의미를 가짐

 

즉, 위의 내용을 활용해서 내용을 써본다면 

 

콜백함수란 함수와 함수사이에 관계를 맺고싶을 때, 변수(혹은 상수일수도 있음)의 형태로 다른 함수에 들어가는 함수

 

라고 말하면 쉬울리가 있나

 

여기까지 정의 끝.

---

콜백 함수의 용도 - 순차적으로 함수를 실행하고 싶을 때 사용함

 

Nodejs나 reactjs를 공부하면서 콜백함수라는 말을 자주 들었기 때문에

콜백함수를 뭔가 새롭게 쓰는 것이라고만 생각을 했었는데,

기본적인 자바스크립트에서도 이 기능을 자주 사용했었다.

 

타겟.addEventListener(행동,함수());

위의 함수는 javascript에서 어떠한 타겟에 이벤트를 추가하는 함수다.

조금 더 상세히 말하자면,

 

1.getelementbyid, queryselector 같은걸로 어떠한 요소를 선택해서

2.그것이 어떠한 행동이 이루어 졌을때

3.이러이러한 함수를 실행해주세요

 

라는 의미의 함수인것이다.

 

여기에 행동 뒤에오는것이 바로 콜백 함수다.

 

즉 순차적으로

[요소에 이벤트 추가]라는 것이 발생 > 함수 실행

요로코롬 하고 싶을때 뒤에 오는것이 콜백 함수인 것이다.

 

 

또 하나의 예시가 있다.

setTimeout(함수(),시간);

위의 함수는 일정 시간동안 멈춘 뒤에 함수를 실행하라는 함수다.

 

여기서도

[멈춰!] > 그리고 함수실행

이라는 순서에 맞춰 진행하며, 이렇게 뒤에오는 함수가 콜백함수다.

 

여기까지 설명을 읽으면, 정확한 콜백함수의 의미는 몰라도

콜백함수가 대충 "뒤에 딸려오는 함수구나"하는것을 이해했을지도 모른다.

 

이제 조금 더 상세한 내용으로 들어가보고자 한다.

 

---

<아래 내용은 뇌피셜 및 완전히 이해하지 못한 내용으로 작성하였기 때문에>

<내용에 있어 불확실 성이 높습니다.>

 

 

콜백 함수의 원리

 

 

function A(parameter){
	parameter()
};


function B(){
};


A(B());

 

나도 이부분은 아직 헤메고 있는 중인데, 내가 이해한대로만 설명을 해보겠당.

 

우선 함수를 하나 정의해본다.

 

함수는 매개변수를 필요로 하며 이 매개변수의 값으로 함수를 갖는 A라는 함수를 세팅해보았다.

 

 

그리고 별도의 B라는 함수를 정하였다.

 

그리고 A라는 함수에 B라는 함수를 넣게되면 B가 바로 콜백함수인 것이다.

(물론 큰 의미에서 A도 콜백함수)

 

위에서 말했듯이 매개변수는 함수와 함수를 이어주는 변수라고 했으며,

이 변수에는 함수(함수는 보통 값에 따라 변하니까!)를 넣을 수 있는 것이다.

---

굳이 왜 콜백함수를 쓰냐하면,

남이 혹은 내가 만든 함수를 쓰고 싶은데, 바로 그 뒤에 나의 무언가가 안정적으로 실행됐으면 하고 생각할때 넣는다고 한다.

 

단점은 DB를 불러올때 코드가 점점 복잡해지는 것이라 하는데,

이는 promise 와 async await을 통해 해결할 수 있다고 한다.

요곤 나도 잘 몰랑

 

 

이해가 다 되면, 글 수정을 할 예정

 

이상.

---

참조 : 코딩애플 - YouTube 콜백함수가 뭔지 한국어로 쉽게 설명하는 영상