callback

carrot·2021년 6월 15일
0

비동기처리

특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다.

function getUserName (userId) {
  let userName;
  axios
    .get(`http://domain.com/user/${userId}`)
    .then(response => userName = response.username)
  
  return console.log(userName)
}

console.log(getUserName('devCarrot'));
// undefined

비동기처리의 특성으로 axios의 response를 기다리지 않고 곧바로 return이 실행되어 결과가 undefined가 됩니다.

이러한 문제를 callback을 통해 해결해 보겠습니다.

function getUserName (userId, callback) {
  axios
    .get(`http://domain.com/user/${userId}`)
    .then(response => callback(response))
}

getUserName('devCarrot', function(response){
  console.log(response.username);
})
// yourcarrot0214

getUserName 함수의 두 번째 인자로 전달한 함수가 바로 callback 함수입니다.
콜백함수는 함수 내부의 기능이 완료된 뒤에 실행됩니다.
위 코드에서는 getUserName이 실행되고 axios 통신이 끝나고 나서 callback 함수에 response 결과를 전달하고 있습니다.
callback 함수는 axios의 동작이 완료된 뒤 실행되어 username값을 출력할 수 있습니다.
한 번쯤 들어본 콜백지옥이라는 말은 콜백 안에서 또다른 콜백을 호출하는 상황이 중첩될 때 발생합니다.
콜백은 비동기처리 뒤에 이어지는 작업들을 처리하기 위해 반드시 필요하지만 과도한 콜백 남용은 가독성이 떨어지고 디버깅이 어려워지는 문제점을 유발합니다.
때문에 코드 분리 또는 promise, async/await를 통해 기능은 유지하고 보다 간결한 코드관리가 필요하겠습니다.

profile
당근같은사람

0개의 댓글