이 포스팅은 [실전 리액트 프로그래밍]을 공부하고 정리한 내용으로, 대부분의 내용이 해당 서적에서 나왔음을 밝힙니다.
"프로미즈는 콜백 패턴의 콜백 중첩으로 코드가 복잡해지는 것을 단순하게 만들어준다."
- 프로미즈의 상태
(1) 대기중(pending): 결과를 기다리는 중
(2) 이행됨(fulfilled): 수행이 정상적으로 끝났고, 결괏값을 가지고 있음.
(3) 거부됨(rejected): 수행이 비정상적으로 끝났음.
※ 대기중을 처리되지 않은(unsettled) 상태, 이행됨과 거부됨의 상태를 처리된(settled) 상태라고 부른다.
- 프로미즈를 생성하는 방법
(1) 대기중(pending) 상태의 프로미즈
const p1 = new Promise((resolve, reject) => { ... });
// 함수 내부에서 어떤 함수 (resolve() or reject())를 호출하느냐에 따라 상태가 결정된다.(2) 이행됨(fulfilled) 상태의 프로미즈
const p2 = Promise.resolve(1022);
// p2에 이행됨 상태의 프로미즈가 할당 되며, p2는 1022를 데이터로 가진 프로미즈이다.(3) 거부됨(rejected) 상태의 프로미즈
const p3 = Promise.reject('error message');- 프로미즈를 이용하는 방법
(1) then then(onResolve, onReject)
onResolve: '이행됨' 상태의 프로미즈를 전달받을 시 수행.
onReject: '거부됨' 상태의 프로미즈를 전달받을 시 수행.
onResolve나 onReject 내부 함수에서 에러가 발생하면 '거부됨' 상태의 프로미즈를 전달하고
에러가 발생하지 않은 경우에 반환(return)값을 지정해주거나, 지정하지 않으면 '이행됨' 상태의 프로미즈를 전달한다.
(※ javascript는 return이 없으면 undefined를 반환하기 때문.)
(2) catch catch(onReject)
'거부됨' 상태의 프로미즈를 전달받을 시 수행된다.
then과 마찬가지로 onReject 내부 함수에서의 에러 발생이나 반환 값에 따라 프로미즈의 상태가 결정된다.
(3) finally
처리된(settled) 프로미즈를 전달받을 시 수행된다.
주의할 점으로, then(onFinally, onFinally)와 1차적으로는 같은 기능을 수행하지만 차이점이 있다.
전달 받은 프로미즈를 그대로 다시 전달한다는 특징이 있는데 이때, 예외적인 케이스가 있다.
ㄴ'이행됨' 상태 → '이행됨' or '거부됨' 상태로 변경해서 전달 가능.
Promise.resolve('이행됨 상태를 전달')
.then(() => console.log('이행됨AA'))
.finally(() => {console.log('무조건수행BB'); throw new Error('거부됨 상태를 전달할래')})
.then(() => console.log('이행됨CC'), () => console.log('거부됨DD'))
.then(() => console.log('이행됨EE'), () => console.log('거부됨FF'))
>> 이행됨AA
>> 무조건수행BB
>> 거부됨DD
>> 이행됨EEㄴ'거부됨' 상태 → '거부됨' 상태로만 전달 가능.
Promise.reject('거부됨 상태를 전달')
.then(() => console.log('이행됨AA'))
.finally(() => {console.log('무조건수행BB'); return '이행됨 상태로 전달'; }) // 이행됨으로 바꿔볼래
.then(() => console.log('이행됨CC'), () => console.log('거부됨DD'))
.then(() => console.log('이행됨EE'), () => console.log('거부됨FF'))
>> 무조건수행BB
>> 거부됨DD
>> 이행됨EE- 요약
1) 프로미즈는 콜백 패턴의 복잡함을 해결해주기 위해 사용할 수 있다.
2) 프로미즈에는 3가지 상태(대기중, 이행됨, 거부됨)가 있다.
3) 프로미즈를 이용하는 3가지 방법 (then, catch, finally)가 있다.
