🌱 기초 프론트엔드
콜백(Callback)이 뭔가요?
쉽게 이해하기
친구에게 '내가 퇴근하면 전화해줘, 그럼 저녁 약속 잡자'라고 말하는 것과 같아요. 퇴근이라는 이벤트가 발생하면, 전화하기라는 동작을 실행하는 거죠. 콜백도 특정 작업이 끝나면 호출되는 함수입니다.
핵심 정리
다른 함수에 인자로 전달되어 나중에 실행되는 함수예요.
자세히 알아보기
콜백 함수는 다른 함수의 인자로 전달되어, 특정 시점에 호출되는 함수를 말해요. '나중에 다시 불러줘(call back)'라는 의미에서 콜백이라고 부릅니다.
가장 흔한 예시는 이벤트 리스너예요. 버튼에 클릭 이벤트를 등록할 때, 클릭했을 때 실행할 함수를 전달하죠. 이 함수가 바로 콜백 함수입니다. 배열의 map(), filter(), forEach() 같은 메서드도 콜백을 받아서 각 요소마다 실행해요.
비동기 작업에서도 콜백이 많이 쓰였어요. 파일을 읽거나 서버에서 데이터를 가져올 때, 작업이 완료되면 실행할 함수를 콜백으로 전달했죠. 하지만 콜백을 중첩해서 사용하다 보면 '콜백 지옥(callback hell)'이라는 문제가 생겨요. 코드가 피라미드처럼 깊어지면서 읽기도 어렵고 에러 처리도 복잡해집니다.
그래서 요즘은 비동기 작업에 Promise나 async/await를 더 많이 사용해요. 하지만 콜백 개념 자체는 여전히 중요합니다. 이벤트 처리, 배열 메서드, 타이머 함수 등 JavaScript 곳곳에서 콜백을 사용하니까요. 콜백을 이해하면 JavaScript의 비동기 처리 흐름을 훨씬 잘 이해할 수 있어요.