코드 를 분석하는 중
Promise 객체를 사용하는 코드가 있어서,
Promise를 한번 정리하고 넘어가려고 함니다 . . .
처음에는 이게모야 ! ! 했는데
fetch가 익숙했기 때문에 죠금으 ㅣ 설명을 보고 이해할 수 있었습니다 !
Promise 객체란?
Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 간단히 말하면, 비동기 작업이 끝날 때까지 결과를 기다리지 않고, 그 결과를 제공하겠다는 약속을 반환하는 객체입니다. 그래서 Promise라는 이름이 지어졌다고 해요.
Promise 객체 생성
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
});위 코드를 보면, Promise 생성자 안에는 두 개의 매개변수를 가진 콜백 함수가 들어갑니다. 첫 번째 매개변수는 작업이 성공했을 때 호출되는 resolve이고, 두 번째 매개변수는 작업이 실패했을 때 호출되는 reject입니다.
function loadData() {
return new Promise((resolve, reject) => {
if (조건) {
resolve(data); // 작업이 성공하면 resolve 호출
} else {
reject(error); // 작업이 실패하면 reject 호출
}
});
}
loadData()
.then((data) => {
console.log('성공!', data);
})
.catch((error) => {
console.error('실패!', error);
});위 예시처럼, loadData() 함수는 Promise 객체를 반환합니다. 성공적인 작업은 resolve()를 호출해서 .then()으로 이어지고, 실패한 작업은 reject()를 호출해서 .catch()로 이어집니다.
왜 Promise 객체를 사용하는 걸까?
- 재사용성: 비동기 작업을 함수로 감싸면, 재사용성이 좋아지고, 여러 곳에서 같은 작업을 반복할 수 있습니다.
- 가독성: Promise 객체를 함수로 감싸면 코드 구조가 명확해져서, 비동기 작업과 사용을 분리할 수 있어서 가독성이 높아집니다.
- 확장성: Promise 객체를 함수로 만들면, 인자를 전달하여 동적으로 비동기 작업을 처리할 수 있습니다.
그렇기 때문에, 많은 자바스크립트 비동기 라이브러리들도 함수 형태로 Promise 객체를 제공합니다. 그 대표적인 예가 바로 fetch()입니다. fetch() 메소드 내에서 Promise 객체를 생성하여, 서버로부터 데이터를 가져오는 데 성공하면 resolve()를 호출하고, .then()으로 결과를 처리하는 방식입니다.
Promise의 3가지 상태
Promise 객체는 비동기 작업의 결과를 약속합니다. 즉, Promise 객체를 생성하고 비동기 작업을 진행하면, 언젠가는 성공 또는 실패로 응답을 받게 됨니다 . . . 이때 Promise의 상태는 크게 3가지로 나뉩니다.
- Pending (대기): 작업이 아직 완료되지 않은 상태.
- Fulfilled (이행): 작업이 성공적으로 완료된 상태.
- Rejected (거부): 작업이 실패한 상태.
상태 변화
- resolve()가 실행되면 Promise 상태는 이행(Fulfilled) 상태로 바뀌고, .then() 메소드가 실행됩니다.
- reject()가 실행되면 Promise 상태는 거부(Rejected) 상태로 바뀌고, .catch() 메소드가 실행됩니다.
시각적으로 보면 이렇게!
결론
Promise 객체는 비동기 작업을 다룰 때 중요한 개념입니다. 작업이 성공적으로 끝나면 resolve()를 호출하여 결과를 넘겨주고, 실패하면 reject()를 호출하여 에러를 처리합니다. 이 후에는 .then()과 .catch() 메소드 체이닝을 통해 비동기 작업의 결과를 처리할 수 있습니다.
앞으로 자바스크립트 비동기 처리를 다룰 때, Promise 객체는 기본이자 필수적인 개념이니까, 꼭 이해하고 넘어가는 것이 중요함니다 . . ! 🙌
