1. 콜백이란?
하나의 코드에 인수로 들어가는 실행 가능한 코드를 Call back이라 한다.
어떤 함수의 인자로 들어가는 실행 가능한 함수를 Call back 함수라고 한다.
2. 콜백 예제 3가지
(1) 기본적인 것
const a = (callback) => {
console.log("A");
callback();
};
const b = () => {
console.log("B");
};
a(b);맨 마지막 문을 보면, a라는 함수의 인수로 b 함수 자체를 넣었다.
그러면 console.log(b) 했을 때 처럼 b 함수 자체가 a의 인수로 들어간다.
그리고 3번째 줄을 보면 callback()은 인수로 받은 b() 함수 자체를 실행하겠다는 의미이다.
따라서 출력이 다음과 같다.
(2) 응용
// 콜백 함수 이용 예제 (2)
const sum = (a, b, c) => {
setTimeout(() => {
c(a + b);
}, 1000);
};
sum(1, 2, (value) => {
console.log(value);
});
sum(3, 7, (value) => {
console.log(value);
});
위의 코드가 (1)과 달라진 점을 함수 선언 자체를 인수 선언부에서 한다는 것이다.
따라서 c라는 매개 변수에 인자를 받아 출력하는 함수 자체가 들어오고, 셋 째줄의 c함수 호출 시, 1+2나 3+7이 들어가서 출력된다.
(3) 심화
// 콜백 함수 이용 예제 (3)
const loadImage = (url, cb) => {
// loadImage라는 함수는 이미지 태그를 JS 내부에 만들고, 이 이미지 태그의 src에 인수로 받은 url 값을 집어넣음.
const imgEl = document.createElement("img");
imgEl.src = url;
imgEl.addEventListener("load", () => {
// addEventLister는 이미지 태그에 이벤트를 집어넣는 것이고 이벤트 type은 로드임. 두번째 인수는 해당 이벤트 발생 시 일어날 동작을 말함.
// "load"-> 해당 웹페이지에서 쓸 모든 파일의 다운로드가 완료될 때, 2번째 인자 함수 발동
setTimeout(() => {
cb(imgEl);
}, 1000);
});
};
const containerEl = document.querySelector(".container");
// Html 도큐먼트 내부에 클래스 이름이 container인 녀석을 선택한다.
// querySelector -> ()에 해당하는 요소를 선택하게 해주는 녀석, 같은 class나 id 인 태그가 있을 경우, 선택자 해당하는 첫번째 요소만 선택
// 해당 선택자인 요소 모두 선택하고 싶다면 해당 모두를 받아 배열에 저장하는 querySelectorAll을 써야함.
loadImage("https://www.gstatic.com/webp/gallery/4.jpg", (imgEl) => {
containerEl.innerHTML = " "; // 클래스이름이 Container인 요소의 내부를 비워라
containerEl.append(imgEl); // 인수로 받은 요소가 Container 요소 내부 맨 마지막에 적힘.
});loadeImage라는 함수에 인자로 url과 함수를 넣었다. 두 번째 인자의 함수를 call back 함수라고 부른다.
인자로 들어온 call back 함수의 내용은 요소의 class가 container인 녀석을 선택하고, 해당 요소의 자식 태그를 전부다 지우고 인수로 받은 태그를 그 내부 맨 마지막 줄에 붙여 넣어라는 뜻이다.
이제 loadImage를 살펴보면
image라는 요소를 document 내부에 만들고,
src에 인수로 받은 uri를 넣고
요소 내부에 이벤트도 등록한다.
addEventListener는 첫 번째 인자로 이벤트의 타입, 두 번째 인자로 해당 이벤트가 벌어질 때 동작할 기능이 들어간다.
여기서 쓰인 "load"라는 이벤트 타입은 해당 웹 페이지에서 쓸 파일이 모두 다운로드 되었을 때, 2 번째 인자로 받은 동작을 수행하라는 뜻이다. 즉 웹 페이지에 쓸 모든 파일이 다운로드 된 시점이 이벤트 발생 시점이다.
2번째 인자 속 내용은 callback 함수 속에 우리가 만들었던 이미지 요소를 집어넣는 것으로 실행된다.
따라서 우리가 만든 이미지 요소가 container란 class의 요소 안에 들어가서 작성되는 것이다.
3. 새롭게 알게 된 것
(1) 요소.addEventListner(type, 동작)
요소안에 특정 이벤트 발생 시 행해야 할 동작 메뉴얼을 집어 넣는다.
type은 벌어질 이벤트가 뭔지에 대한 기술이다. 문자열로 적혀있고 type에 따라 이벤트 내용이 다르다.
두 번째 인자인 동작은 해당 이벤트가 벌어졌을 때 행하는 동작이다.
(2)containerEl.innerHTML = " ";
containerEl이란 요소 안쪽에 " "안의 내용을 적어 넣는 것이다.
"" 안은 HTML 문법의 요소들이 적힌다.
해당 코드는 innerH라는 id의 요소를 가져와서 그 요소 안쪽 자식 태그로 ""안의 내용을 집어넣는 것이다.
해당 Dom 문법은 요소 안을 싹 지우고 " "안의 내용으로 다시 쓰는 것이라 우리 코드처럼, = " "으로 하면
해당 요소 내부를 싹 비우겠다는 뜻이다.
4. 스스로 해보기
마지막 심화 내용을 따라 해보자.
// https://blog.kakaocdn.net/dna/yDtgP/btrJaVA4iLN/AAAAAAAAAAAAAAAAAAAAACb3iu_rqc9JyumuYxwyxdhTQWBZBkdP76d3st1PpUIk/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1764514799&allow_ip=&allow_referer=&signature=10RLzulnHkfyBjMEEnH9EodPBbE%3D
const loadImage = (url, cb) => {
const image = document.createElement("img");
image.src = url;
setTimeout(() => {
cb(image);
}, 1000);
};
const containerEl = document.querySelector(".container");
loadImage(
"https://blog.kakaocdn.net/dna/yDtgP/btrJaVA4iLN/AAAAAAAAAAAAAAAAAAAAACb3iu_rqc9JyumuYxwyxdhTQWBZBkdP76d3st1PpUIk/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1764514799&allow_ip=&allow_referer=&signature=10RLzulnHkfyBjMEEnH9EodPBbE%3D",
(value) => {
containerEl.innerHTML = "";
containerEl.append(value);
}
);
