콜백함수에서 value() 가 갑자기 어디서 나온걸까요?

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

1.13) 콜백함수

해결된 질문

작성

수정됨

function main(value) {
    value();
}

function sub() {
    console.log("sub");
}

main(sub);

여기서 main() 을 호출하면 main 함수를 호출하게 되고,
main 함수에서는 매개변수로 value를 받고 있는데

main(sub)를 호출하게 되면 main() 함수가 실행이 되고,
여기서 main 함수 안에 있는 value()는 매개변수로 받은 값이 value라서 value()이렇게 매개변수로 받은 이름으로 함수를 호출하는걸까요?

그럼 만약 매개변수로 aaa를 받았다면 main 함수 안에서 aaa()를 호출하게 되면 동일하게 sub() 함수가 호출되는걸까요?

main 함수 안에서
매개변수로 받은 value()를 호출하는것과
함수 sub()를 바로 호출하는것과의 장단점이 있을까요?

그리고 main 함수 안에서

value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??
value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?

javascript react node.js

답변 1

이정환 Winterlood

지식공유자

안녕하세요 인프러너님 이정환입니다.

우선 강의에서 설명드렸듯 자바스크립트에서는 함수도 값으로 취급됩니다. 따라서 다음 코드처럼 이미 선언된 함수를 다른 변수에 담는것 또한 역시 가능합니다.

function sub() {
  console.log("hello");
}

const func = sub;
// sub 함수를 func 변수에 저장
// 주의. sub 함수의 결과값을 저장한 것이 아님, 그럴려면 func = sub()로 작성해야 함

위와 같이 함수를 값으로 취급하여 다른 변수에 저장하는 것이 가능하기 때문에, 다음과 같이 매개변수에 함수를 저장하는 것 역시 가능합니다.

function main(value) {}
// 매개변수 value로 sub 함수 저장

function sub() {
  console.log("hello");
}

main(sub);
// main 함수를 호출하면서 인수로 sub 함수 전달

위 예제를 분석해보자면 다음과 같습니다.

main 함수와 sub 함수가 각각 선언되어 있습니다.
main 함수를 호출하면서 인수로 sub 함수를 전달합니다.
그 결과 main 함수의 매개변수 value에 sub 함수가 저장됩니다.

결과적으로 main 함수에 매개변수 value에는 sub 함수가 저장됩니다. 참고로 이때 이렇듯 다른 함수에 인수로 전달되는 함수를 콜백함수라고 표현합니다.

여기까지 이해가 잘 되셨다면 다음 코드는 쉽게 이해하실 수 있을겁니다.

function main(value) {
  value(); 
}

function sub() {
  console.log("hello");
}

main(sub);

위 코드를 분석하자면 다음과 같습니다.

main 함수와 sub 함수가 각각 선언되어 있습니다.
main 함수를 호출하면서 인수로 sub 함수를 전달합니다.
그 결과 main 함수의 매개변수 value에 sub 함수가 저장됩니다.
호출된 main 함수는 value 변수에 저장된 함수를 호출합니다.
그 결과 sub 함수가 호출되어 콘솔에 "hello"가 출력됩니다.

이렇듯 자바스크립트에서는 value() 처럼 매개변수의 이름으로 콜백함수를 호출할 수 있습니다.
그렇다면 만약 다음과 같이 매개변수의 이름을 바꾸면 어떨까요? 바꿔봅시다.

function main(func) {
  func();
}

function sub() {
  console.log("hello");
}

main(sub);

방금전 코드에서 main 함수의 매개변수 이름만 value -> func로 변경했습니다. 그러면 이제 main 함수 내부에서는 value()로 콜백함수를 호출하는게 아니라 func()로 콜백함수를 호출하면 됩니다. 그 외의 달라질 건 전혀 없습니다.

그렇다면 이런 콜백함수는 왜 사용해야 하는걸까요? 굉장히 여러가지 이유가 있지만 가장 핵심적인 이유로는 코드의 재사용성을 높이기 위함 입니다. 이는 제가 직접 작성한 아래 아티클을 보시면 더 쉽게 이해하실 수 있을겁니다.

https://reactjs.winterlood.com/d2ffdbe0-c061-4d52-9d83-d4f39e401680#55daa1fe640449299e2f12e8f49ec0c9

그리고 추가로

그리고 main 함수 안에서
value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??
value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?

"value를 호출하는 것과 value()를 호출하는것의 차이가 무엇인지 궁금하다" 라고 하셨는데 이게 무슨 말씀인지 잘 모르겠습니다. 조금만 더 질문을 구체화 해 주시면 감사하겠습니다.

기본적으로 호출(Call)이라는 것은 선언된 함수를 실행하기 위해 func() 와 같은 형태로 함수의 이름과 함께 소괄호를 사용하는 문법을 말하는데요 이 밖의 다른 호출 방법을 말씀하시는건지 궁금합니다.

인프러너

질문자

자세한 답변 감사합니다.

value 호출과 value()호출은 예전에 소스에서 봤었는데

function myFunc(callback){
    ..코드 실행
    setTimeout(function(){
        callback && callback();
    }, 500)
}

위와같은 소스가 있어서 callback && callback() 이 부분이 이해가 안가서 callback을 삭제를 하고 callback()만 남겨놨었는데 해당 콜백메소드가 정상적으로 실행이 안되서 다시 callback && callback() 이렇게 하니 정상적으로 콜백메소드가 실행이 되었습니다.

이 부분이 이해가 안가서 문의 드렸습니다.

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

요 부분이 궁금하신거였군요! 알겠습니다. callback && callback() 은 자바스크립트의 Truthy & Falsy 그리고 단락평가를 이용한 문법입니다.

그러나 질문자님께서는 현재 콜백함수 파트를 수강중이신 것으로 보아 질문하신 내용은 현재 진도 이후의 내용이 될 것 같습니다.

그럼에도 설명해드리자면 식 a && b 의 결과는 단락평가에 의해 a와 b 둘다 참이라면 b가 되고 a가 거짓이라면 a가 되는데요 동일한 논리에서 callback && callback() 에서 매개변수 callback의 값이 Truthy 하다면(null, undefined이 아니라면) 매개변수 callback 함수를 호출하고, 그렇지 않고 매개변수 callback의 값이 Falsy 하다면(null, undefiend 이라면) 매개변수 callback에 담긴 함수를 호출하지 않게 됩니다.

위 내용이 잘 이해되시지 않는다면 Truthy & Falsy 챕터와 단락평가 챕터를 확인하시면 도움이 될 것 같습니다. 참고로 Truthy Falsy 그리고 단락평가는 우리 강의의 3섹션 JavaScript 심화의 1,2 챕터로 배치되어 있으니 참고해주세요!

인프런 커뮤니티 질문&답변

콜백함수에서 value() 가 갑자기 어디서 나온걸까요?