콜백 (Call Back)

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초 뒤에 뜸

위의 코드가 (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/dn/yDtgP/btrJaVA4iLN/9QtVWLrCIrUtDz7U4Udsr0/img.jpg

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/dn/yDtgP/btrJaVA4iLN/9QtVWLrCIrUtDz7U4Udsr0/img.jpg",
  (value) => {
    containerEl.innerHTML = "";
    containerEl.append(value);
  }
);