Computer >> 컴퓨터 >  >> 프로그래밍 >> Java

자바스크립트 콜백 함수 완벽 가이드: 개념부터 실전 활용까지

코드를 공부하다 보면 함수 안에 'callback'이라는 단어가 등장하는 코드 조각을 본 적이 있을 겁니다. 콜백(callback)은 다른 함수의 인수로 전달되는 특별한 유형의 함수입니다.

콜백은 이벤트 핸들러 안에서 특정 코드 블록을 실행하기 위해 자주 사용됩니다. 이 글에서는 콜백 함수가 무엇인지, 어떻게 동작하는지 설명하고, 실제 예제를 통해 코드에서 콜백을 활용하는 방법까지 차근차근 알아보겠습니다.

콜백 함수란 무엇인가?

콜백 함수는 다른 함수의 매개변수(parameter)로 전달되는 함수를 말합니다.

콜백 함수는 자신이 전달된 함수 내부에서 실행됩니다. 어떤 함수를 실행할 때 콜백이 지정되어 있다면 해당 콜백 함수도 함께 실행되고, 실행이 끝난 후에는 그 결과를 메인 함수로 되돌려줍니다.

콜백이 가능한 이유는 자바스크립트에서 모든 함수가 객체(object)이기 때문입니다. 함수는 다른 객체처럼 다룰 수 있으므로, 변수에 할당하거나 다른 값과 똑같이 인수로 전달할 수 있습니다.

간단한 예제로 콜백의 동작 방식을 살펴보겠습니다. 게임에서 플레이어의 이름을 콘솔에 출력한 뒤, 이어서 캐릭터 타입을 출력하는 함수를 만들어 보겠습니다. 먼저 함수를 선언합니다:

function printName(name, callback) {
	console.log(`Player Name: ${name}`);
	callback();
}

위 코드는 콜백을 포함한 익명 함수(anonymous function) 예제입니다. 익명 함수는 이름이 없는 함수로, 주로 위 예제처럼 다른 함수 내부에서 정의되어 사용됩니다.

콜백은 두 번째 매개변수로 지정되어 있습니다. 이 함수가 실행되면 먼저 플레이어 이름이 콘솔에 출력되고, 그다음 callback() 함수의 내용이 실행됩니다.

이제 이 함수를 실제로 호출해 보겠습니다:

printName("Violet", function() {
	console.log("Character Type: Mage");
});

위 코드에서는 printName() 함수를 호출하면서 플레이어 이름으로 "Violet"을, 콜백으로는 캐릭터 타입을 출력하는 함수를 지정했습니다. 실행 결과는 다음과 같습니다:

Player Name: Violet
Character Type: Mage

printName() 함수의 내용이 먼저 실행된 뒤, 콜백 함수의 내용이 이어서 실행됩니다. 참고로 콜백은 반드시 인수 자리에서 즉석으로 선언할 필요는 없습니다. 코드를 리팩토링해서 콜백 함수를 밖으로 분리할 수도 있습니다:

function printCharacterType() {
	console.log("Character Type: Mage");
}

printName("Violet", printCharacterType);

이 코드 역시 동일한 결과를 출력합니다. 플레이어의 캐릭터 타입을 콘솔에 출력하는 printCharacterType() 함수를 별도로 정의하고, printName()을 호출할 때 콜백으로 전달한 것입니다. 이렇게 함수 자체를 인수로 넘기면 코드의 재사용성이 높아진다는 장점이 있습니다.

이벤트와 함께 콜백 사용하기

콜백은 자바스크립트 이벤트 처리에서 특히 많이 사용됩니다.

이벤트는 버튼 클릭처럼 사용자의 특정 동작을 감지하고, 그 동작이 발생했을 때 지정된 코드 블록을 실행합니다. 이번에는 사용자가 이미지 위에 마우스를 올렸을 때 실행되는 콜백을 만들어 보겠습니다. HTML 파일을 열어 <body> 태그 안에 다음 코드를 붙여넣습니다:

<img src="https://careerkarma.com/favicon.ico" id="image" />

이 코드는 웹 페이지에 이미지를 하나 표시합니다. 이어서 아래 자바스크립트 코드를 <script> 태그 안에 작성합니다:

var image = document.querySelector("#image");

image.addEventListener("mouseover", function() {
	console.log("The user has moused over the image.");
});

이 코드는 ID가 "image"인 요소를 선택한 뒤, addEventListener() 메서드로 "mouseover"(마우스 호버) 이벤트를 감지합니다. 사용자가 커서를 이미지 위에 올리면 콘솔에 다음 메시지가 출력됩니다:

The user has moused over the image.

웹 요청과 함께 콜백 사용하기

웹 요청은 서버의 응답을 기다리는 동안 시간이 걸리기 때문에 비동기(asynchronous) 방식으로 처리되는 경우가 많습니다. 대부분의 웹 애플리케이션은 페이지의 나머지 부분을 렌더링하기 전에 필요한 데이터를 먼저 받아와야 하기 때문입니다. 콜백을 사용하면 "응답이 도착했을 때 실행할 코드"를 미리 지정해 둘 수 있습니다.

테스트용 더미 데이터를 제공하는 JSON Placeholder API에 요청을 보내고, 응답을 콘솔에 출력하는 프로그램을 만들어 보겠습니다. 먼저 요청을 담당하는 함수를 선언합니다:

async function makeRequest(url, callback) {
	const query = await fetch(url).then(res => res.json());
	callback(query);
}

이 함수는 fetch() API로 웹 요청을 보내고, 응답을 JSON 형태로 변환해 query 변수에 저장합니다. 그런 다음 query를 인수로 콜백 함수에 전달해 요청 결과를 넘겨줍니다. 참고로 await 키워드는 async 함수 안에서만 사용할 수 있으므로 함수 선언부에 async를 붙였습니다.

이제 함수를 호출하고 응답을 콘솔에 출력해 보겠습니다:

makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
	console.log(data);
});

이 코드는 makeRequest()에게 JSON Placeholder API에 요청을 보내도록 지시하고, 콜백 함수가 반환된 데이터를 콘솔에 출력합니다. 실행 결과는 다음과 같습니다:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto."
}

성공입니다! 코드가 웹 요청을 보내고, 그 응답을 콘솔에 출력했습니다.

마무리하며 (도전 과제)

콜백을 활용하면 함수를 다른 함수의 매개변수로 전달할 수 있습니다. 콜백은 이벤트가 발생했을 때 코드를 실행하거나, 웹 요청의 응답을 처리할 때 폭넓게 사용됩니다.

간단한 도전 과제를 드립니다. 웹 페이지에서 버튼이 클릭되었을 때 실행되는 콜백 함수를 직접 작성해 보세요. 이미 해봤다면 한 단계 더 나아가, 항목 목록을 정렬한 뒤 콜백 함수로 각 항목을 콘솔에 출력하는 함수를 만들어 보는 건 어떨까요?

이제 여러분도 프로처럼 자바스크립트 콜백을 활용한 비동기 프로그래밍을 시작할 준비가 되었습니다!