10-1 비동기처리 - Callback
Intro
콜백함수를 통한 비동기 처리에 대해 알아보겠습니다.
콜백함수를 통한 비동기 처리에 대해 알아보겠습니다.
콜백함수?
비동기처리?
비동기처리의 이상한 코드 진행 순서를 콜백함수로 바로잡기!
🔵 콜백함수
어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수이다. 또는, 특정 함수의 인자로 넘겨져서 코드 내부에서 호출되는 함수이다.
- 콜백함수 예시
function findCallBack(id,callback){
const user = {
id:id,
name:"User"+id,
}
callback(user)
};
findCallBack(1,function (user) {
console.log("user":user);
})
// 결과 user:{user:1,name:User1}
자바스크립트에서는 함수도 숫자나 문자처럼 변수에 할당할 수 있는 하나의 값이기 때문에 콜백함수를 다른 함수의 인자로 넘기는 것은 자연스럽습니다.
➡ 그런데 자바스크립트 특유의 비동기 처리
가 들어가면 이상해집니다.🤔
🔵 콜백함수를 통한 비동기처리
비동기(Asynchronous) 함수란 실행결과를 기다리지 않는 함수입니다.
비동기함수는 실행결과를 기다리지 않는 Non-blocking
이점 때문에, 싱글스레드 환경의 자바스크립트에서 광범위하게 사용됩니다. 따라서 브라우져에서 결과를 기다리지 않아서 사용자 경험에 좋을 수 있다.
- 비동기처리 예시
function findUser(id) {
let user
setTimeout(function () {
console.log("0.1초 기다림")
user = {
id: id,
name: "User" + id,
}
}, 100)
return user
}
const user = findUser(1)
console.log("user:", user)
// 결과
// user: undefined
// 0.1초 기다림
setTimeout
은 비동기함수이기 때문에,0.1초를 기다리지 않고 다음 라인을 진행시킵니다. 이로 인해, 리턴 user -> console user
이 진행되고 나서 내부에서 user가 정의되면서 0.1초기다림
이 찍히게 됩니다.
➡ 그비동기 처리
가 들어가면 이상해진 코드실행과정을 콜백함수
를 통해 해결할 수 있습니다.👍
- 콜백함수를 통한 비동기처리
function findUserCallBack (id,callback) {
setTimeout(function () {
console.log("0.1초 기다림")
const user = {
id: id,
name: "User" + id,
}
callback(user)
}, 100)
}
findUserCallBack(1, function (user) {
console.log('USer:'+user)
})
// 결과
// 0.1초 기다림
// user: undefined
비동기 처리 함수
를 통해 만들어진 user를 리턴받지 말고 콜백함수를 통해 이어서
로직을 실행하도록 만들어야 원하는 코드진행과정이 만들어 집니다.
➡ 그러나 이러한 방식으로 콜백함수를 중첩해서 사용하게 되면 코드의 가독성이 떨어지고 복잡해짐으로써 콜백 지옥
의 상황에 빠질 수 있습니다...🤔
이를 해결할 방법으로 Promise
나 async/awati
를 이용할 수 있는데 이 부분을 다음 글에서 알아볼게요!!
Author And Source
이 문제에 관하여(10-1 비동기처리 - Callback), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hsngju/JS-10-1-비동기처리-Callback저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)