본문 바로가기
개발

자바스크립트 콜백함수(callback)에 대해 (개념,동작 원리,사용이유,장점,단점) 알아보자

by 싼쵸 2024. 7. 21.
반응형

프론트엔드 일을 시작한지 곧 있으면 3년차가된다.

이번년도부터 스터디를 시작하면서 본격적으로 JS에 대해 공부하고 있는데,

개발을 처음 시작했을 때 이해가지 않았던 개념이나 단어들이 최근에는 이해가 되고있다.

그래서 요즘 살짝 재미를 붙인 상태이다.

오늘은 처음에는 몰랐던 단어인 '콜백함수' 에 대한 글이다.

부끄럽지만 나는 콜백함수가 정확히 어떤건지 모르고 그냥 지나쳤는데

벌써 만 3년이 흘렀더라....

 

천안으로 가는 기차에서 코어자바 스크립트를 읽는 데 콜백함수 부분을 읽는 데 잘 이해가 안가더라

그래서 스터디때 얘기했더니 그 부분에 대해서 스터디 얘기하는게 어떻겠냐 제안을 받아 본격적으로 공부했다.

 

 

맨처음에 알았던 단어이면서 개발하면서 계속 듣는 단어인 오늘은 콜백함수에 대해 글을 쓰려고한다.

 

 

콜백함수란

콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다. 이는 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출됩니다. - MDN

 

 

 

콜백 함수의 동작 원리

콜백 함수는 다른 함수에 인수로 전달되어, 해당 함수가 특정 작업을 마친 후에 호출됩니다. 예를 들어, 서버에서 데이터를 가져오는 작업을 수행할 때, 데이터를 모두 받아온 후에 처리할 로직을 콜백 함수로 전달할 수 있습니다

function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched");
        callback();
    }, 1000);
}

function processData() {
    console.log("Processing data");
}

fetchData(processData);

 

위 예제에서 fetchData 함수는 데이터를 가져오는 비동기 작업을 수행하고, 작업이 완료되면 processData 콜백 함수를 호출합니다.

 

 

콜백함수가 필요한 이유

1.비동기 작업을 처리
2.코드의 유연성을 높이며
3.제어 흐름을 관리하기 위해 사용

 

GPT 에게 물어봤더니 이렇게 대답이 왔다.

그래서 아래 내용이 JS의 특징과 연관이 있냐고 다시 물어봤다.

 

GPT 답변

네, 맞습니다. 위의 문장은 자바스크립트의 주요 특징 중 하나인 비동기 처리와 직접적으로 연관이 있습니다. 자바스크립트의 비동기 처리와 콜백 함수의 사용이 어떻게 연관되는지 자세히 설명해드리겠습니다

 

자바스크립트의 비동기 처리와 콜백 함수의 연관성

유명한 짤

1.비동기 작업 처리: 자바스크립트는 비동기 작업을 효율적으로 처리하기 위해 콜백 함수를 사용합니다. 비동기 작업은 시간이 오래 걸리는 작업을 처리할 때 메인 스레드를 차단하지 않고 계속해서 다른 작업을 수행할 수 있도록 합니다. 예를 들어, 네트워크 요청, 파일 읽기/쓰기, 타이머 설정 등은 비동기 작업의 대표적인 예입니다.

console.log('Start');

setTimeout(() => {
    console.log('Timeout complete');
}, 2000);

console.log('End');

위 예제에서 setTimeout 함수는 비동기 함수이며, 2초 후에 콜백 함수를 실행합니다. 이 동안 메인 스레드는 계속 실행되어 'End'를 출력합니다.

 

2.코드의 유연성 증가: 콜백 함수를 사용하면 함수의 동작을 동적으로 결정할 수 있어 코드의 유연성이 높아집니다. 즉, 특정 작업이 완료된 후 실행할 코드를 유연하게 지정할 수 있습니다.

function processData(data, callback) {
    // 데이터를 처리하는 코드
    console.log(data);
    // 처리 완료 후 콜백 함수 호출
    callback();
}

processData('Hello, World!', () => {
    console.log('Data processing complete.');
});

위 코드에서 processData 함수는 데이터를 처리한 후 콜백 함수를 호출합니다. 이를 통해 데이터 처리 후 실행할 작업을 유연하게 지정할 수 있습니다.

 

3.비동기 제어 흐름 관리: 콜백 함수를 사용하면 비동기 코드의 흐름을 제어하기 쉽게 만들 수 있습니다. 하지만 콜백 함수의 중첩이 많아지면 콜백 지옥(callback hell)에 빠질 수 있습니다. 이를 해결하기 위해 Promise나 async/await 같은 현대적인 비동기 처리 방법이 도입되었습니다.

// 콜백 지옥 예제
function firstTask(callback) {
    setTimeout(() => {
        console.log('First task complete');
        callback();
    }, 1000);
}

function secondTask(callback) {
    setTimeout(() => {
        console.log('Second task complete');
        callback();
    }, 1000);
}

function thirdTask(callback) {
    setTimeout(() => {
        console.log('Third task complete');
        callback();
    }, 1000);
}

firstTask(() => {
    secondTask(() => {
        thirdTask(() => {
            console.log('All tasks complete');
        });
    });
});

 

Promise

// Promise 사용 예제
function firstTask() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('First task complete');
            resolve();
        }, 1000);
    });
}

function secondTask() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Second task complete');
            resolve();
        }, 1000);
    });
}

function thirdTask() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Third task complete');
            resolve();
        }, 1000);
    });
}

firstTask()
    .then(secondTask)
    .then(thirdTask)
    .then(() => {
        console.log('All tasks complete');
    });

 

async/await

// async/await 사용 예제
async function runTasks() {
    await firstTask();
    await secondTask();
    await thirdTask();
    console.log('All tasks complete');
}

runTasks();

 

이렇게 보니 왜 콜백지옥인지 이해가 단번에 되고

promise와 async/await의 감사함이 저절로 생긴다.

발전하는 시대에 개발자된게 감사하다.

 

추가적으로 콜백에는 유독 "비동기"단어가 관련해서 많이 나온다.

그래서 자연스럽게 자바스크립트에서 비동기작업이 필요한 이유에 대해 GPT한테 물어봤다.

 

GPT답변

자바스크립트에서 비동기 작업이 필요한 이유는 여러 가지가 있습니다. 주된 이유는 자바스크립트의 단일 스레드 특성과 관련이 있습니다. 자바스크립트는 기본적으로 단일 스레드 환경에서 동작하므로, 비동기 작업을 사용하지 않으면 긴 작업이 다른 작업을 차단하여 사용자 경험에 악영향을 줄 수 있습니다. 아래에서 자바스크립트에서 비동기 작업이 필요한 구체적인 이유들을 설명하겠습니다.

 

1. 메인 스레드 차단 방지

자바스크립트는 단일 스레드로 동작하므로, 시간이 많이 걸리는 작업(예: 네트워크 요청, 파일 읽기/쓰기, 데이터베이스 쿼리 등)이 메인 스레드를 차단할 수 있습니다. 비동기 작업을 사용하면 이러한 작업을 백그라운드에서 처리하고, 메인 스레드는 사용자 인터페이스를 비롯한 다른 작업을 계속 수행할 수 있습니다.

 

예시: 네트워크 요청

console.log('Start');

setTimeout(() => {
    console.log('Timeout complete');
}, 2000);

console.log('End');

위 예제에서 setTimeout 함수는 비동기로 실행되므로, Start와 End가 먼저 출력되고 2초 후에 Timeout complete이 출력됩니다. 만약 비동기가 아니라면 2초 동안 메인 스레드가 차단될 것입니다.

 

2. 사용자 경험 개선

비동기 작업을 사용하면 응답성이 높은 애플리케이션을 만들 수 있습니다. 예를 들어, 네트워크 요청이 완료될 때까지 사용자 인터페이스가 응답하지 않으면 사용자 경험이 매우 나빠집니다. 비동기 작업을 사용하면 사용자 인터페이스가 요청을 기다리지 않고 계속 반응할 수 있습니다.

 

예시: 비동기 API 호출

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

console.log('Fetching data...');

위 코드에서 fetch 함수는 비동기로 동작하므로, 데이터가 로드되는 동안에도 다른 코드가 실행될 수 있습니다. 따라서 사용자 인터페이스가 멈추지 않고 계속 반응할 수 있습니다.

 

3. 효율적인 자원 사용

비동기 작업을 사용하면 자원을 효율적으로 사용할 수 있습니다. 예를 들어, 서버로부터 데이터를 가져오는 동안 다른 작업을 처리할 수 있습니다. 이를 통해 시스템 자원을 최대한 활용하고, 전체적인 성능을 향상시킬 수 있습니다.

 

예시: 파일 읽기와 데이터 처리

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

console.log('Reading file...');

 

위 코드에서 fs.readFile 함수는 비동기로 파일을 읽으므로, 파일이 읽히는 동안 Reading file...이 출력됩니다. 파일 읽기가 완료되면 콜백 함수가 호출되어 파일 내용을 출력합니다.

 

4. 콜백 함수와 비동기 제어

비동기 작업은 콜백 함수, Promise, async/await 등과 결합하여 사용할 수 있습니다. 이를 통해 복잡한 비동기 흐름을 제어하고, 코드의 가독성과 유지보수성을 높일 수 있습니다

 

예시: async/await

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();
console.log('Fetching data...');

 

 

콜백 함수의 종합적인 장점

  • 비동기 작업 처리: 콜백 함수는 비동기 작업을 효율적으로 처리하여 메인 스레드가 차단되지 않도록 합니다.
  • 코드의 유연성 증가: 함수의 동작을 동적으로 결정할 수 있어 코드의 재사용성과 유연성이 높아집니다.
  • 비동기 제어 흐름 관리: 비동기 작업이 순차적으로 실행되어야 할 때 콜백 함수를 사용하여 작업 간의 의존성을 관리할 수 있습니다. 이는 복잡한 비동기 작업 흐름을 제어하는 데 유용합니다.
function firstTask(callback) {
    setTimeout(() => {
        console.log('First task complete');
        callback();
    }, 1000);
}

function secondTask(callback) {
    setTimeout(() => {
        console.log('Second task complete');
        callback();
    }, 1000);
}

function thirdTask() {
    console.log('Third task complete');
}

firstTask(() => {
    secondTask(thirdTask);
});
  • 모듈화 및 재사용성 증가: 콜백 함수를 사용하면 코드의 특정 동작을 분리하여 모듈화할 수 있습니다. 이는 코드 재사용성을 높이고 유지보수를 쉽게 합니다.
function fetchData(url, callback) {
    // 데이터를 가져오는 코드
    fetch(url)
        .then(response => response.json())
        .then(data => callback(data))
        .catch(error => console.error('Error fetching data:', error));
}

function processData(data) {
    console.log('Processing data:', data);
}

fetchData('https://api.example.com/data', processData);
  • 비동기 오류 처리: 콜백 함수를 사용하면 비동기 작업 중 발생할 수 있는 오류를 처리하는 로직을 추가할 수 있습니다. 이를 통해 안정적인 오류 처리가 가능합니다.
function fetchData(url, successCallback, errorCallback) {
    fetch(url)
        .then(response => response.json())
        .then(data => successCallback(data))
        .catch(error => errorCallback(error));
}

function handleSuccess(data) {
    console.log('Data fetched successfully:', data);
}

function handleError(error) {
    console.error('Error fetching data:', error);
}

fetchData('https://api.example.com/data', handleSuccess, handleError);
 
 
오늘은 콜백 함수에 대해 몰랐던 개념을 조금이나마 해소한 시간을 보냈습니다. 3년 동안 콜백 함수를 매일 사용했으면서도 몰랐다는 것이 부끄럽지만, 지금이라도 알게 되어 다행입니다. 앞으로도 꾸준히 공부하며 자바스크립트의 다양한 특징과 기능을 이해해 나갈 것입니다. 여러분도 함께 콜백 함수와 비동기 작업의 중요성을 이해하고, 더 나은 개발자가 되길 바랍니다.
 
이제부터라도 하나하나씩 시리즈로 한번 써볼게요.
결국 이런게 모여 나중에 큰힘이 되지 않을까요 ??
오늘 콜백함수를 공부하면서 자바스크립트에 대한 특징 다시한번 공부할 수 있었네요.
 
저는 절대로 개발을 포기하지 않고 계속 앞으로 나아갈 겁니다.
 
 
참고 문헌
  • MDN
  • 코어자바스크립트
  • 모던자바스크립트

 

반응형
저작자표시

'개발' 카테고리의 다른 글

ESLint( 뜻,기능,사용하는 이유,자주 사용 규칙,플러그인,airbnb ESLint) 총정리  (0) 2024.08.19
Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기  (0) 2024.07.27
자바스크립트 Array filter 정의 및 사용법  (0) 2024.07.06
객체를 배열로 바꾸는 방법 feat.JavaScript  (0) 2024.06.30
React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드  (0) 2024.06.30

관련글

댓글

티스토리툴바