[React] 콜백함수 (Callback)

★ 콜백함수란 무엇일까?

 

어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 특히 자바스크립트에서는 비동기 작업을 할때 가장 흔히 사용 되는 방법중 하나로 콜백함수를 사용한다. 

 

예시를 통해서 콜백함수가 무엇인지 살펴 보자

 

▶ 파라미터 값 number가 주어지고 거기에 +5를 더해서 add1 반환하는 함수를 만들어 보았다.

 

해당 함수가 처리된 직후 어떤 작업을 하고 싶으면 이와같이 콜백 함수를 활용해서 작업을 진행하면 된다.

 

import React from "react";

function increase(number, callback) {
  setTimeout(() => {
    const add1 = number + 5;
    if (callback) {
      callback(add1);
    }
  }, 2000);
}

increase(0, (add1) => {
  console.log(add1);
});

 

---

 

▶ 만약에 2초에 걸쳐서 5, 10, 15, 20같은 형태로 순차적 처리를 하고 싶으면 콜백함수 중첩이 가능하다.

import React from "react";

function increase(number, callback) {
  setTimeout(() => {
    const add1 = number + 5;
    if (callback) {
      callback(add1);
    }
  }, 2000);
}

console.log("Start");
increase(0, (add1) => {
  console.log(add1);
  increase(add1, (add1) => {
    console.log(add1);
    increase(add1, (add1) => {
      console.log(add1);
      increase(add1, (add1) => {
        console.log(add1);
        console.log("Finish");
      });
    });
  });
});

 

---

 

콜백함수 log

 

위의 조건대로 작성을 한 코드를 log를 확인해 보면 다음과 같은 결과가 도출된다 .

 

그런데 작성된 코드 처럼 매번 중첩된 식으로 통해서 해결하기에는 코드의 가독성이 떨어지고 보수하기도 힘들어진다.

 

이를 '콜백 지옥' 이라고 부른다. 저런 코드는 매우 Bad한 코드임을 명심하자

 

그리고 이러한 콜백 지옥 코드를 형성되지 않게 ES6에서 도입한 Promise에 대해 다음에 알아보도록 하겠다 . !