[javascript] Callback을 통한 비동기 처리

저번 포스트에서 공부하면서 비동기의 문제점에 대해 알게되었다. 

비동기적으로 실행하는데 실행할 때마다 실행되는 순서가 달랐다. 이렇듯 예측 불가능한 코드는 작성하고자 하는 의도와 다르게 동작할 수 있다. 따라서 이를 제어하기 위한 여러 방법중 Callback 함수를 통해 순서를 제어하는 방법에 대해 알아볼것이다 ! 

 

사실 비동기 코드를 작성해 사용해본적이 없었다. 그래서 처음 공부할 때 비동기적 코드는 실행 순서가 멋대로인데  다시 실행순서를 제어해줄거면 동기적 코드를 사용하면 되지 않나 ? 라는 생각을 했던 거같다. 그런데 어쨌든 !! 5개의 일이 있다고 가정하면 1-2-3-4-5 순으로 일이 진행되어야 한다고 가정할 때 동기적인 것은 1이 끝나고 2 ..3 ..4 ..5 이런식으로 진행되는데 비동기는 1,2,3,4,5 가 동시에 실행되고 수행을 마치는 순서만 1,2,3,4,5 로 해주는 것이니 비동기 코드가 더 유용하겠구나 느꼈다. 
ㅎㅎ 약간 바보같은 생각을 했던 거같다 ! 

 

Callback

const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
};

printAll();

위와 같이 작성하게 된다면 printAll 이 실행되었을 때 printString ('A' , printString('B' , (printString('C', ... ) 로 콜백함수가 실행되면서 A 가 찍힌후에 B가 찍히고 C 가 찍히게 된다. 

콘솔창을 통해 A-B-C 순으로 결과가 나옵니다.

 

하지만 이렇게 비동기의 순서를 정해주기 위해 콜백 함수를 많이 불러 Callback Hell 이 발생한다는 단점이 생긴다. 

위의 코드는 ABC 만 있지만 만약 A 부터 Z 까지 찍는 코드를 생각해보면 ... 이해가 바로 갈 것이다. 

 

따라서 이런 콜백 헬을 방지하기 위해 나온 것이 Promise 이다.  Promise 에 대해선 다룰 내용이 많으므로 다음 포스트에서 쓰도록 하겠다 !!