프로미스(Promise)

이일우·2023년 3월 23일

공부하기

목록 보기

20/42

자바스크립트 프로미스

프로미스(Promise)

프로미스(Promise)는 자바스크립트에서 비동기 처리를 쉽게 관리할 수 있는 객체입니다. 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것을 의미합니다. 프로미스를 사용하면, 비동기 작업의 결과를 기다릴 필요 없이 비동기 처리를 효과적으로 조작할 수 있습니다.

프로미스가 나오게 된 배경

비동기 처리를 위해 자바스크립트에서는 콜백 함수를 사용했습니다. 하지만 콜백 함수를 사용하면 코드의 가독성이 떨어지고, 에러 처리가 어렵다는 단점을 보완하기 위해 프로미스가 도입되었습니다.

프로미스 사용법

프로미스를 생성하는 방법은 다음과 같습니다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 코드
});

promise
  .then((result) => {
    console.log('성공:', result);
  })
  .catch((error) => {
    console.error('실패:', error);
  });

프로미스를 사용하여 비동기 작업을 처리하려면 then과 catch 메서드를 사용합니다.

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('데이터를 가져왔습니다.');
  }, 1000);
});

fetchData
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

위 예제에서 fetchData라는 프로미스 객체를 생성하고, 1초 후에 '데이터를 가져왔습니다.'라는 문자열을 반환합니다. then 메서드를 사용하여 성공한 경우의 결과를 출력하고, catch 메서드를 사용하여 실패한 경우의 에러를 출력합니다.

프로미스의 장점

가독성: 프로미스를 사용하면 콜백 함수보다 코드의 가독성이 좋아집니다.
에러 처리: 프로미스는 catch 메서드를 통해 에러를 쉽게 처리할 수 있습니다.
연결성: 프로미스는 여러 개의 비동기 작업을 연결하여 처리할 수 있습니다.

프로미스의 단점

브라우저 지원: 구형 브라우저에서는 프로미스를 지원하지 않거나 제한적인 기능만 지원할 수 있습니다.
메모리 사용: 프로미스를 사용하면 콜백 함수에 비해 메모리 사용량이 증가할 수 있습니다.

프로미스 사용 시 주의점

에러 핸들링: 프로미스에서 발생하는 에러는catch 메서드를 사용하여 핸들링해야 합니다. 그렇지 않으면, 에러가 발생해도 알 수 없습니다.
프로미스 상태: 프로미스는 세 가지 상태(Pending, Fulfilled, Rejected)를 가집니다. 프로미스 상태를 잘 이해하고 사용해야 합니다.
중첩 프로미스: 프로미스 안에 프로미스를 사용하는 경우, 코드가 복잡해질 수 있으므로 적절한 구조를 사용해야 합니다.