📌 Callback

• 함수로 실행할 때 인자값으로 함수 자체를 받는 함수를 Callback함수라고 부른다.

function sum(x, y, callback) {
  let result = x + y
  callback(result)
}

function print(data) {
  console.log("콜백함수 실행 결과값 : ", data)
}

sum(3, 5, print)		//'콜백함수 실행 결과값 : ' 8

위의 예시를 보면 sum이라는 함수 인자로 print()라는 함수를 받아 result를 구한 후 console.log에 작성한 문구가 출력되는 것을 확인할 수 있다. 이 때 sum함수의 인자로 사용된 print함수를 Callback함수라고 부른다.

그런데 Callback함수를 사용하면 위와 같이 점점 안쪽으로 들여쓰기가 되는 코드가 만들어진다. 연속적으로 Callback함수의 결과값으로 다른 로직을 작성해나갈 때 Callback 지옥(Callback hell)이 발생된다. Callback지옥 발생시 가독성이 떨어지고 해당 로직을 수정하기도 어려워진다.

---

📌 Promise

• Callback 지옥을 해결하기 위해 ES6에서 Promise를 도입하였다.
• axios를 활용하여 promise를 구현할 수 있다.

function testPromise() {
  axios
    .get("http://numbersapi.com/random?min=1&max=200")

    .then((res) => {
      const num = res.data.split(" ")[0];
      return axios.get(`http://koreanjson.com/posts/${num}`);
    })
  
    .then((res) => {
      console.log(res.data);
    });
}

"http://numbersapi.com/random?min=1&max=200" 페이지에서 랜덤으로 바뀌는 맨 앞의 숫자를 split()함수를 통하여 가져온 뒤 koreanjson.com의 게시물 number값으로 활용하여 데이터를 가져와 출력해주는 구조이다. 이때 axios를 사용하여 먼저 수행하고자 하는 작업을 get()을 통하여 수행해주고, 해당 작업이 끝나면 then()을 통하여 응답 값이 전달되어 개발자가 활용할 수 있게 되는 구조이다.

위와 같이 위의 작업을 마친 후 다음 작업을 진행하고 싶을 때 .then() 이후에 .then()을 다시 사용하여 Callback지옥에서 벗어(?)날 수 있다.

그러나 Promise는 Callback 함수보다 가독성은 좋아졌지만 데이터를 가져올 때 axios를 사용하면 위에서부터 순서대로 가져오지 않고 비동기적으로 작동한다.

---

📌정리

Callback 함수를 중첩으로 사용하면 Callback지옥처럼 코드의 가독성이 매우 안좋아지고 로직을 수정하기도 힘들어진다. Promise의 경우에는 Callback함수처럼 코드의 깊이가 깊어지지 않으므로 가독성이 좋아진다.

axios와 함께 Promise를 사용할 때 순서대로 가져오지 않는 점을 해결하고 싶다면, async/await구문을 사용하면 된다.