콜백함수란?
콜백함수에 대해서 알아보자.
콜백함수의 이해와 활용법
콜백 함수란 무엇인가?
콜백 함수는 다른 함수의 인자로 전달되어, 특정 이벤트나 조건이 발생했을 때 실행되는 함수이다.
즉, 함수를 변수에 할당하고, 다른 함수의 인자로 전달하고, 함수에서 반환할 수 있다.
콜백 함수의 역할
JavaScript에서 콜백 함수는 비동기적인 작업을 처리하거나, 특정 이벤트에 대한 응답으로 사용된다.
이를 통해 코드의 흐름을 제어하고, 비동기 작업을 효율적으로 처리할 수 있다.
콜백 함수의 종류
1. 명시적 콜백과 익명 콜백
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 명시적 콜백
function namedCallback() {
console.log('명시적 콜백 함수가 호출되었습니다.');
}
function usingNamedCallback(callback) {
console.log('명시적 콜백 함수를 사용합니다.');
callback();
}
usingNamedCallback(namedCallback);
// 익명 콜백
function usingAnonymousCallback(callback) {
console.log('익명 콜백 함수를 사용합니다.');
callback();
}
usingAnonymousCallback(function() {
console.log('익명 콜백 함수가 호출되었습니다.');
});
2. 동기적 콜백과 비동기적 콜백
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 동기적 콜백
function syncCallback() {
console.log('동기적 콜백 함수가 호출되었습니다.');
}
function syncFunction(callback) {
console.log('동기적 함수를 실행합니다.');
callback();
console.log('동기적 함수의 실행이 완료되었습니다.');
}
syncFunction(syncCallback);
// 비동기적 콜백
function asyncCallback() {
console.log('비동기적 콜백 함수가 호출되었습니다.');
}
function asyncFunction(callback) {
console.log('비동기적 함수를 실행합니다.');
setTimeout(function() {
callback();
console.log('비동기적 함수의 실행이 완료되었습니다.');
}, 2000);
}
asyncFunction(asyncCallback);
콜백 함수의 활용
이벤트 핸들에서의 콜백 함수 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 핸들러와 콜백 함수</title>
</head>
<body>
<button id="myButton">버튼</button>
<script>
// 버튼 클릭 이벤트에 콜백 함수 등록
document.getElementById('myButton').addEventListener('click', function() {
console.log('버튼이 클릭되었습니다.');
});
</script>
</body>
</html>
이 코드에서는 버튼 요소를 클릭 할 때마다 콜백 함수가 실행된다.
이벤트 핸들러에 전달된 콜백함수는 버튼이 클릭되었을 때 실행된다.
비동기적 작업에서의 콜백 함수 활용
1
2
3
4
5
6
7
8
9
10
11
12
13
// 비동기적으로 데이터를 로드하는 함수
function fetchData(callback) {
// 예시로 setTimeout 함수를 사용하여 2초 후에 콜백 함수를 호출
setTimeout(function() {
const data = ['사과', '바나나', '딸기'];
callback(data);
}, 2000);
}
// fetchData 함수를 호출하고 콜백 함수로 데이터를 처리
fetchData(function(data) {
console.log('로드된 데이터:', data);
});
이 코드에서는 fetch함수가 비동기적으로 데이터를 로드하고, 데이터 로드가 완료된 후에
콜백 함수를 호출한다. 콜백 함수는 로드된 데이터를 인자로 받아 처리한다.
콜백지옥(callback hell)방지 방법
콜백 지옥이란 무엇인가?
콜백 함수를 중첩하여 사용할 때 코드가 복잡해지고, 가독성이 떨어지는 현상이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 첫 번째 비동기 작업
asyncFunction1(function(data1) {
// 두 번째 비동기 작업
asyncFunction2(data1, function(data2) {
// 세 번째 비동기 작업
asyncFunction3(data2, function(data3) {
// 네 번째 비동기 작업
asyncFunction4(data3, function(data4) {
// 다섯 번째 비동기 작업
asyncFunction5(data4, function(data5) {
// 여섯 번째 비동기 작업
asyncFunction6(data5, function(data6) {
// 일곱 번째 비동기 작업
asyncFunction7(data6, function(data7) {
// 여덟 번째 비동기 작업
asyncFunction8(data7, function(data8) {
// 최종 결과 처리
console.log('최종 결과:', data8);
});
});
});
});
});
});
});
});
콜백 지옥을 해결하는 방법
Promise나 async/await을 활용하여 해결할 수 있다.
위의 코드를 기준으로 Promise나 async/await을 활용하여 해결해보겠다.
Promise를 사용한 해결
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
asyncFunction1()
.then(asyncFunction2)
.then(asyncFunction3)
.then(asyncFunction4)
.then(asyncFunction5)
.then(asyncFunction6)
.then(asyncFunction7)
.then(asyncFunction8)
.then(data8 => {
console.log('최종 결과:', data8);
})
.catch(error => {
console.error('에러 발생:', error);
});
asyncFunction1, 2, 3 … 등은 Promise를 반환하는 함수이다.
이를 연달아 호출하여 비동기작업을 처리하고, then메서드를 통해 다음 작업으로 연결한다.
이와 같은 방식으로 콜백 지옥을 해결할 수 있다.
async/await를 사용한 해결
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function runAsyncFunctions() {
try {
const data1 = await asyncFunction1();
const data2 = await asyncFunction2(data1);
const data3 = await asyncFunction3(data2);
const data4 = await asyncFunction4(data3);
const data5 = await asyncFunction5(data4);
const data6 = await asyncFunction6(data5);
const data7 = await asyncFunction7(data6);
const data8 = await asyncFunction8(data7);
console.log('최종 결과:', data8);
} catch (error) {
console.error('에러 발생:', error);
}
}
runAsyncFunctions();
위의 코드에서 runAsyncFunctions함수는 async키워드로 선언되었으며, await키워드를 사용하여
각 비동기 함수를 순차적으로 호출하고 결과를 받아온다.
이렇게 하면 코드가 더 직관적이고 가독성 또한 좋아진다.
결론
콜백 함수는 JS에서 비동기 작업을 처리하고 코드의 흐름을 제어하는데 중요한 요소이다.
콜백 함수를 너무 남발하면 콜백 지옥에 빠질 수 있는데, 코드의 복잡성을 해결하기 위해
Promise와 async/await을 활용하여 해결해보았다.
Promise나 async/await을 사용하면 콜백 지옥을 효과적으로 해결 할 수 있으며,
코드 가독성과 유지보수가 편리해지게 만들어 준다.
따라서 콜백 함수를 활용할 때는 Promise나 async/await를 적절히 활용하여
코드 가독성과 유지보수성을 향상시키는게 좋다.