콜백 :: imaginaring 님의 블로그

콜백

2024년 12월 16일

imaginaring
작성자
2024.12.16.:51

콜백 함수: 특정 작업이 완료된 후 호출됨
왜 사용하나?
- 비동기적 작업(예: 이벤트 핸들링, 타이머, API 호출) 처리.
- 함수의 실행 순서를 조정하거나 로직을 분리할 때 유용합니다.
사례
- 자바스크립트에서 Array 메소드들은 대부분 콜백 함수 사용 (foreach, map 등등)
- setTimeout 등 비동기 작업에서 사용
- 이벤트 핸들러에서 사용

<!DOCTYPE html>
<html lang="en">
<body>
    <button id="myButton">Click me</button>
    <script>
        const button = document.getElementById("myButton");
        button.addEventListener("click", function () {
            console.log("버튼이 클릭되었습니다.");
        });
    </script>
</body>
</html>

단점
- 가독성이 떨어지고 유지보수가 어려운 상황이 생길수도 있다 .. 콜백지옥이라 하는듯
  - 콜백 함수를 별도로 분리, Promise 사용, Async/Await을 사용하는 등 개선이 필요

// 함수 분리

function step1(callback) {
    console.log("Step 1");
    callback();
}

function step2(callback) {
    console.log("Step 2");
    callback();
}

function step3(callback) {
    console.log("Step 3");
    callback();
}

function allDone() {
    console.log("모든 작업 완료!");
}

step1(() => step2(() => step3(allDone)));

// Promise 사용 

function step1() {
    return new Promise((resolve) => {
        console.log("Step 1");
        resolve();
    });
}

function step2() {
    return new Promise((resolve) => {
        console.log("Step 2");
        resolve();
    });
}

function step3() {
    return new Promise((resolve) => {
        console.log("Step 3");
        resolve();
    });
}

step1()
    .then(step2)
    .then(step3)
    .then(() => console.log("모든 작업 완료!"));

// Async / Await 사용

function step1() {
    return new Promise((resolve) => {
        console.log("Step 1");
        resolve();
    });
}

function step2() {
    return new Promise((resolve) => {
        console.log("Step 2");
        resolve();
    });
}

function step3() {
    return new Promise((resolve) => {
        console.log("Step 3");
        resolve();
    });
}

async function runSteps() {
    await step1();
    await step2();
    await step3();
    console.log("모든 작업 완료!");
}

runSteps();

'프로그래밍 > JS, 리액트 등 웹 프론트' 카테고리의 다른 글

리액트 - 상태관리, 리렌더링, Hooks (0)	2024.12.17
내부함수와 외부함수 (1)	2024.12.16
DOM (0)	2024.12.16
타입과 형변환 (0)	2024.12.16
자바스크립트 엔진 (1)	2024.12.16

다음 글이 없습니다.

이전 글이 없습니다.

'프로그래밍 > JS, 리액트 등 웹 프론트' 카테고리의 다른 글

티스토리툴바