Promise 이해하기

자바스크립트의 프로미스^Promise는 비동기 처리에 사용되는 객체입니다. 비동기 처리는 특정 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말합니다. 프로미스는 이러한 비동기 처리를 더 효율적으로 처리하고 코드를 더 읽기 쉽게 만들어줍니다.

 

프로미스는 세 가지 상태를 가질 수 있습니다:

• 대기(pending): 비동기 처리가 완료되지 않은 상태로 초기 상태
• 이행(fulfilled): 비동기 처리가 성공적으로 완료된 상태
• 거부(rejected): 비동기 처리에 실패한 상태

 

비동기 처리가 완료되면 resolve(이행) 콜백을 호출해 성공적으로 처리된 결과를 전달합니다. 만약 작업에 실패하면 reject(거부) 콜백을 호출하고 실패 사유를 전달합니다.

 

프로미스는 다음과 같은 구조로 작성됩니다:

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공 시 resolve(결과);
  // 실패 시 reject(실패 사유);
});

// Promise 사용 예시:
myPromise.then((result) => {
  // 성공적으로 처리된 경우 실행되는 콜백
}).catch((error) => {
  // 작업이 실패한 경우 실행되는 콜백
});

 

이러한 프로미스 구조를 통해 콜백 헬^{callback hell}을 방지하고 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다. 또한, 프로미스 체인을 통해 여러 비동기 작업을 연속적으로 실행하는 것도 가능하며, async/await과 함께 사용하면 더욱 편리한 비동기 처리 코드를 작성할 수 있습니다.

 

위 코드를 async/await 문법으로 작성하면 다음과 같습니다:

async function myAsyncFunction() {
  try {
    const result = await new Promise((resolve, reject) => {
      // 비동기 작업 수행
      // 성공 시 resolve(결과);
      // 실패 시 reject(실패 사유);
    });

    // 성공적으로 처리된 경우 실행되는 코드
  } catch (error) {
    // 작업이 실패한 경우 실행되는 코드
  }
}

// myAsyncFunction을 호출하여 사용
myAsyncFunction();

프로미스를 async/await으로 변환하려면 함수의 앞에 async 키워드를 추가하고, 프로미스 객체를 반환하는 함수 호출 부분에 await 키워드를 사용합니다. 위 코드에서 await 키워드를 사용하는 부분은 프로미스 객체를 반환하는 함수 호출 앞에 붙여줍니다. 그리고 try…catch 블록을 사용해 비동기 작업을 처리하면서 성공과 실패에 대응할 수 있습니다.

async/await을 사용하면 프로미스 체인 대신에 코드를 더 동기적으로 작성할 수 있으며, 오류 처리도 try…catch 블록을 사용해 간편하게 처리할 수 있습니다.