함수 내에서 "콜백"이라는 단어를 사용하는 몇 가지 코드 조각을 본 적이 있을 것입니다. 콜백은 다른 함수 내부에 전달되는 특수한 유형의 함수입니다.
콜백은 종종 이벤트 핸들러 내에서 코드 블록을 실행하는 데 사용됩니다. 이 가이드에서는 콜백 함수가 무엇이고 어떻게 작동하는지에 대해 이야기할 것입니다. 코드에서 사용하는 방법을 배우는 데 도움이 되는 콜백 함수의 예를 살펴보겠습니다.
콜백 기능이란 무엇입니까?
콜백 함수는 매개변수로 다른 함수에 전달되는 함수입니다.
콜백 함수는 선언된 함수 내에서 실행됩니다. 함수를 실행할 때 콜백 함수가 지정된 경우 해당 함수가 실행됩니다. 일단 실행되면 콜백 함수는 메인 함수에 대한 응답을 반환합니다.
JavaScript에서는 모든 함수가 객체이기 때문에 콜백 함수가 작동합니다. 이것은 우리가 다른 개체와 마찬가지로 작업할 수 있음을 의미합니다. 다른 값과 마찬가지로 함수를 변수에 할당하거나 인수로 전달할 수 있습니다.
콜백이 작동하는 방식을 보여주기 위해 간단한 예를 사용하겠습니다. 우리는 비디오 게임의 사용자 이름을 콘솔에 출력하고 그 뒤에 문자 유형을 출력하는 함수를 만들 것입니다. 함수 선언부터 시작하겠습니다.
function printName(name, callback) {
console.log(`Player Name: ${name}`);
callback();
}
이것은 콜백을 포함하는 익명의 JavaScript 함수입니다. 익명 함수는 이름이 없는 함수입니다. 일반적으로 위의 예와 같이 다른 함수 내부에 나타납니다.
이 콜백은 코드의 두 번째 매개변수입니다. 이 기능이 실행되면 플레이어의 이름이 콘솔에 인쇄됩니다. 그런 다음 callback() 함수의 내용이 실행됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이제 이 기능을 사용해 보겠습니다.
printName("Violet", function() {
console.log("Character Type: Mage");
})
printName() 함수를 호출했습니다. 이 코드에서. 플레이어의 이름으로 "바이올렛"을 지정했습니다. 문자 유형을 콜백으로 출력하는 함수를 지정했습니다. 이 코드를 실행하고 무슨 일이 일어나는지 봅시다:
플레이어 이름:보라색
문자 유형:마법사
printName()의 내용 함수가 실행되고 콜백 함수의 내용이 뒤따릅니다. 콜백 함수는 매개변수로 전달할 때 선언할 필요가 없습니다. 콜백 함수가 자체적으로 있도록 코드를 리팩토링할 수 있습니다.
function printCharacterType() {
console.log("Character Type: Mage");
}
printName("Violet", printCharacterType())
이 코드는 동일한 응답을 반환합니다. printCharacterType()이라는 함수를 만들었습니다. 플레이어의 캐릭터 유형을 콘솔에 출력합니다. 이 함수는 printName()을 실행할 때 실행됩니다. , 콜백으로 지정되어 있습니다.
이벤트와 함께 콜백 사용
콜백은 일반적으로 JavaScript 이벤트와 함께 사용됩니다.
이벤트는 사용자가 버튼을 클릭하는 것과 같은 작업을 수신 대기하고 해당 작업이 수행될 때 코드 블록을 실행합니다. 사용자가 이미지 위로 마우스를 가져갈 때 실행되는 콜백을 만들어 보겠습니다. HTML 파일을 열고
태그 안에 다음 코드를 붙여넣습니다.
<img src=“ https://careerkarma.com/favicon.ico ” id=“image” />
이것은 사용자가 클릭할 수 있는 웹 페이지의 이미지를 정의합니다. 그런 다음 <script> 안에 다음 JavaScript 코드를 묶습니다. 꼬리표:
var image = document.querySelector("#image")
image.addEventListener("mouseover", function() {
console.log("The user has moused over the image.");
});
이 코드는 ID가 "image"인 요소를 선택합니다. 그런 다음 addEventListener 메서드를 사용하여 사용자가 이미지를 "마우스 위로"(마우스를 가져갈 때) 수신 대기합니다. 사용자가 커서로 이미지 위로 마우스를 가져가면 콘솔에 메시지가 인쇄됩니다.
사용자가 이미지 위로 마우스를 가져갔습니다.
웹 요청과 함께 콜백 사용
웹 요청은 일반적으로 동기식으로 실행되어야 합니다. 이는 대부분의 웹 애플리케이션이 페이지의 나머지 부분을 로드하기 전에 특정 데이터를 검색해야 하기 때문입니다.
테스트 목적으로 사용할 수 있는 더미 데이터가 있는 API인 JSON Placeholder API에 요청하는 프로그램을 만들어 보겠습니다. 우리 프로그램은 콘솔에 응답을 출력해야 합니다. 요청을 만드는 함수를 선언하는 것으로 시작하겠습니다.
function makeRequest(url, callback) {
var query = await fetch(url).then(res => res.json());
callback(query);
}
이 함수는 fetch() API를 사용하여 웹 요청을 만듭니다. 응답은 "query" 변수에 할당됩니다. 콜백 함수의 인수로 "쿼리"를 전달하여 이 웹 요청의 결과를 콜백에 반환합니다. 이제 함수를 호출하고 콘솔에 대한 응답을 출력해 보겠습니다.
makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
console.log(data);
});
이 코드는 JSON Placeholder API에 요청하도록 makeRequest 메소드에 지시합니다. 콜백 함수는 이 요청에서 반환된 데이터를 콘솔에 인쇄합니다.
{
"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."
}
엄청난! 우리 코드가 웹 요청을 하고 콘솔에 대한 응답을 출력했습니다.
결론(및 과제)
콜백을 사용하면 함수를 다른 함수 내부의 매개변수로 전달할 수 있습니다. 이벤트가 실행될 때 코드를 실행하거나 웹 요청을 만들기 위해 이벤트 핸들러 내에서 일반적으로 사용됩니다.
당신은 도전을 찾고 있습니까? 웹 페이지에서 버튼을 눌렀을 때 실행되는 콜백 함수를 작성하십시오. 이미 이 작업을 수행했다면 항목 목록을 정렬하고 콜백 함수를 사용하여 각 항목을 콘솔에 출력하는 함수를 작성해 보십시오.
이제 전문가처럼 비동기 프로그래밍을 위해 JavaScript 콜백을 사용할 준비가 되었습니다!