강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

bestoon님의 프로필 이미지
bestoon

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

2.13) 비동기 작업 처리하기 2. Promise

출력 결과가 이해되지 않습니다.

작성

·

125

0

const promise = new Promise((resolve, reject) => {
    // 비동기 작업을 실행하는 함수
    // executor

    setTimeout(() => {
        console.log("안녕");
        // resolve();
        reject();
    }, 2000);
});

console.log(promise);

setTimeout(() => {
    console.log(promise);
}, 3000);

첫 번째 console.log와 setTimeout에서의 두 번째 console.log는 promise객체의 상태가 달라야 한다고 생각하는데 왜 같은지가 궁금합니다.

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

직접 확인해보니 아래와 같이 첫번째 Promise 객체의 값은 pending 상태로, 두번째 Promise 객체의 값은 rejected로 잘 변경되어 나오는걸로 확인됩니다.

image.png

 

브라우저 콘솔 환경이 아닌 Node.js 에서 실행했을 때에도 다음과 같이 첫번째 Promise 객체는 pending 으로 출력되고 두번째 Promise 객체는 rejected를 호출해 실패했기 때문에 프로그램이 비정상 종료하는 걸 볼 수 있습니다.

image.png

 

결론적으로 두 Promise 객체의 상태는 다른 것으로 확인되는데요, 혹시 어떤 환경에서 어떤 방법을 통해 코드를 실행하셨을때 같은 결과로 도출되었는지 알려주시면 다시 확인 해 보겠습니다.

bestoon님의 프로필 이미지
bestoon
질문자

브라우저 콘솔 환경에서 진행했습니다. 저도 다시 확인해 보니 코드를 저장해서 새로 실행시킨 후에 첫 번째 promise 객체 출력에 대해서

  1. 두 번째 promise가 출력되기 전에 바로 프로퍼티를 열어보면 pending

  2. 두 번째 promise가 출려되는걸 전부 기다린 후에 첫 번째 출력의 프로퍼티를 열어어보니 rejected로 나왔습니다.

image.png

2번의 경우가 이런 식인데 지금 보니 미리보기는 pending이라 되어 있지만 state는 rejected라고 뜨네요.

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

아하 Promise의 최종 결과를 말씀하시는 것 이로군요

우선 cosole.log는 객체의 상태를 끝까지 추적하여 콘솔에 출력합니다. 따라서 시간에 따라 비동기적으로 변화하는 Promise 객체의 상태도 끝까지 추적되어 말씀하신것 처럼 프로퍼티를 열어 결과를 확인하실 수 있어요

이때 두 Promise 모두 결국 Rejected 상태로 변화하는 이유는 앞서 종료된 Promise를 처리하는 과정에서 명시적으로 reject를 호출해 예외를 발생하셨기 때문입니다. 예외가 발생한 그 순간 프로그램은 작동을 멈추기 위해 예정중이던 모든 작업을 실패로 처리하게 됩니다.

0

안녕하세요, 인프런 AI 인턴입니다. bestoon님.

비동기 프로그래밍에서 Promise 객체의 상태를 이해하는 것은 매우 중요합니다. 처음 console.log(promise);에서 출력되는 Promise 상태는 pending입니다. 이는 아직 비동기 작업이 완료되지 않았음을 의미합니다.

이후 두 번째 setTimeout 내의 console.log(promise);에서 출력되는 Promise 객체는 rejected 상태로 변경됩니다. 이는 reject() 함수가 호출되었기 때문입니다. Promise는 비동기적으로 상태가 변경되므로 setTimeout 내의 console.log(promise); 출력은 이미 reject된 상태를 나타냅니다.

관련된 유사한 질문과 답변이 다수 존재하므로, 자세한 예제를 직접 확인하고 싶다면 다음 게시물들을 참조하시기 바랍니다:

  1. promise 관련 질문 있습니다. - 유사한 promise 동작에 대한 설명을 다루고 있습니다.
  2. 두 코드의 차이점 - 비동기 코드 작동 방식에 대해 더 깊이 이해할 수 있습니다.

Promise 객체가 어떤 상황에서도 같은 객체로 나타나는 이유는 Promise의 상태 변경이 비동기적으로 이루어지며, 즉시 객체 자체가 변하지 않기 때문입니다. Promise는 다음 상태로 이행되거나 거부되기 전까지는 같은 상태로 유지됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

bestoon님의 프로필 이미지
bestoon

작성한 질문수

질문하기