JavaScript 비동기 처리 이해하기: Promise와 async/await

안녕하세요, mj입니다! 오늘은 JavaScript의 비동기 처리 개념에 대해 알아보고, Promise와 async/await의 사용법을 자세히 설명해 드리겠습니다.

비동기 처리란?

비동기 처리는 프로그램이 다른 작업을 수행하는 동안 특정 작업이 완료되기를 기다리지 않고, 동시에 여러 작업을 처리할 수 있도록 합니다. JavaScript는 기본적으로 싱글 스레드 언어이지만, 비동기 처리를 통해 효율적인 코드 작성을 가능하게 합니다.

Promise란?

Promise는 비동기 작업의 결과를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:

• 대기(Pending): 초기 상태, 결과가 아직 결정되지 않음
• 이행(Fulfilled): 작업이 성공적으로 완료됨
• 거부(Rejected): 작업이 실패함

다음은 Promise의 기본 사용 예시입니다:

Promise 예시

const myPromise = new Promise((resolve, reject) => {
    const success = true; // 성공 여부를 결정하는 변수
    if (success) {
        resolve("작업이 성공적으로 완료되었습니다.");
    } else {
        reject("작업이 실패했습니다.");
    }
});

myPromise
    .then(result => console.log(result))
    .catch(error => console.error(error));

출력 결과: 작업이 성공적으로 완료되었습니다.

async/await란?

async/await는 Promise를 더 쉽게 사용할 수 있도록 도와주는 문법입니다. async 키워드가 붙은 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 기다립니다.

async/await 예시

const fetchData = async () => {
    try {
        const response = await myPromise; // 비동기 작업을 기다림
        console.log(response);
    } catch (error) {
        console.error(error);
    }
};

fetchData();

출력 결과: 작업이 성공적으로 완료되었습니다.

Promise와 async/await의 비교

Promise와 async/await는 각각의 장단점이 있습니다. Promise는 여러 비동기 작업을 체이닝할 때 유용하고, async/await는 코드를 더 간결하고 읽기 쉽게 만들어 줍니다.

Promise 체이닝 예시

myPromise
    .then(result => {
        console.log(result);
        return "다음 작업 실행";
    })
    .then(nextResult => console.log(nextResult))
    .catch(error => console.error(error));

출력 결과: 작업이 성공적으로 완료되었습니다., 다음 작업 실행

async/await로 체이닝 예시

const fetchDataChaining = async () => {
    try {
        const firstResult = await myPromise;
        console.log(firstResult);
        const secondResult = "다음 작업 실행";
        console.log(secondResult);
    } catch (error) {
        console.error(error);
    }
};

fetchDataChaining();

출력 결과: 작업이 성공적으로 완료되었습니다., 다음 작업 실행

결론

비동기 처리는 현대 웹 개발에서 매우 중요합니다. Promise와 async/await를 활용하여 비동기 작업을 효율적으로 처리할 수 있습니다. 이 글이 여러분에게 도움이 되었기를 바랍니다!

감사합니다! mj입니다.