[JavaScripts] Promise๊ฐ์ฒด์ ๋์๋ฐฉ์
๐ก Synchronous VS Asynchronous
- Synchronous: ๋๊ธฐ์ ์ผ๋ก ์์ฐจ์ ์ผ๋ก ์คํ๋๋ ํ๋ก๊ทธ๋จ
- Asynchronous: ๋น๋๊ธฐ์ ์ผ๋ก ์คํ๋๋ ํ๋ก๊ทธ๋จ
btn.addEventListener('click', () => {});
์ด๋ฏธ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ฑ๋กํ๊ณ ์ฌ์ฉํ๋ ๊ณผ์ ์์, ๋น๋๊ธฐ์ ์ธ ์คํ์ด ๋๊ณ ์๋ ๊ฒ์ด๋ค.
๐ Promise
๐ ์ฑํ์ด๊ฐ ํผ์์ง์ ๊ฐ์ ํผ์๋ฅผ ์ฃผ๋ฌธ์ ํ๊ณ , ์๋ฆฌ์ฌ๊ฐ ์ง๋๋ฒจ๋ก ์๋ ค์ค๋ค๊ณ ์ง๋๋ฒจ์ ์ฃผ์๋ค.
์๋ฆฌ์ฌ๋ ์ฑํ์ด์ ์ฃผ๋ฌธ ํฌํจ ์ฌ๋ฌ ๊ฐ์ ์ฃผ๋ฌธ์ด ๋ฐ๋ ค์์ ๊ฒ์ด๋ค.
- ์ง๋๋ฒจ์ด ํ๋์์ด๋ฉด ์์์ด ์ ์์ ์ผ๋ก ๋์จ ๊ฒ์ด๊ณ ,
- ์ง๋๋ฒจ์ด ๋นจ๊ฐ์์ด๋ฉด ์์ ์กฐ๋ฆฌ์ ๋ฌธ์ ๊ฐ ์๊ธด ๊ฒ์ด๋ค.
- ์ฑํ์ด(Consumer),
- ์๋ฆฌ์ฌ(producer),
- ์ฃผ๋ฌธ(producing code)
- ์ง๋๋ฒจ(promise)
- ํ๋์(resolve→value) : value=ํผ์, ์ฆ ๊ฒฐ๊ด๊ฐ
- ๋นจ๊ฐ์(reject→error) : ์๋ฌ๋ฐ์
- ๋นจ๊ฐ์์ ๋ํ ํ์์กฐ์น(consuming code) : ๋ค๋ฅธ ๋ฉ๋ด๋ฅผ ์ํฌ ๊ฒ์ธ์ง ๋ฑ์ ์์ธ์ฒ๋ฆฌ๋ฅผ ํ๋ค.
- ๋นจ๊ฐ์, ํ๋์(State) : ์ํ๋ฅผ ์ด์ผ๊ธฐํ๋ค.
๐ promise๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ promise ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ค๋ค, ๊ฐ์ฒด ์์ ์๋ ํจ์๋ “์คํํจ์”๋ก์จ ๊ฐ์ฒด๊ฐ ์คํ๋ ๋ ๊ฐ์ด ์คํ๋๋ค.
์ฆ, promise ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๊ฑด ์ฑํ์ด๊ฐ ์ฃผ๋ฌธ์ ํ๊ณ ์๋ฆฌ์ฌ๊ฐ ์๋ฆฌ๋ฅผ “๋ฐ๋ก”์์ํ๋ ์ํฉ
โญ ์ ๊ทธ๋ฆผ์ ๋ณด์,
promise ๊ฐ์ฒด๋ state, result๋ฅผ ๊ฐ์ง๊ณ ์๊ณ ,
resolve๋ state, result,
reject๋ state, result๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๋ง์ฝ ์์ ์ด ์ฑ๊ณต์ ์ผ๋ก ์คํ์ด ๋์๋ค๋ฉด, promise๊ฐ์ฒด์ state๋ fulfilled, result๋ value๋ก ๋ฐ๋ ๊ฒ์ด๊ณ .
์คํจ๋ฅผ ํ๋ค๋ฉด, state๋ rejected, result๋ error๋ก ๋ฐ๋ ๊ฒ์ด๋ค.
let promise = new Promise((resolve, reject) => {
let success = true; // ์์๋ก ์ฑ๊ณต ์กฐ๊ฑด์ true๋ก ์ค์
if (success) {
resolve('์์
์ฑ๊ณต!');
} else {
reject('์์
์คํจ ใ
ใ
');
}
});
promise
.then(result => {
console.log(result); // '์์
์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์์ต๋๋ค' ์ถ๋ ฅ
})
.catch(error => {
console.log(error); // '์์
์ด ์คํจํ์์ต๋๋ค' ์ถ๋ ฅ
});
โญ ์ด์ ์ ์ฝ๋๋ฅผ ๋ณด์, ์์ ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๊ฐ ๋์๋ค๋ฉด
sucess๋ฅผ true๋ก ์ค์ ์ ํด์ ๋ฌด์กฐ๊ฑด resolve('์์ ์ฑ๊ณต!') ์ด ๋ถ๋ถ์ด ํ์ฐ์ ์ผ๋ก ์คํ์ด ๋ ๊ฒ์ด๊ณ . resolve ๋ด๋ถ์ value๋ "์์ ์ฑ๊ณต!" ์ด๋ผ๋ ๊ฐ์ ๊ฐ์ง ๊ฒ์ด๋ค. => ์ด๋ก ์ธํด Promise๊ฐ์ฒด๋ ์ฑ๊ณต์ํ๊ฐ ๋จ
๊ทธ ํ promise ๊ฐ์ฒด๊ฐ ์ฑ๊ณต์ํ์ด๋ฏ๋ก,. then๋ฌธ์ ์๋ result ์๋ resolve.value = "์์ ์ฑ๊ณต!" ์ด ๋ค์ด์์ ๊ฒ์ด๊ณ , ์ต์ข ์ ์ผ๋ก ์ฝ์์๋ "์์ ์ฑ๊ณต!" ์ด ์ฐํ ๊ฒ์ด๋ค
๐ ๋ด๊ฐ ์ดํดํ๊ธฐ ํ๋ค์๋ ๋ถ๋ถ์..
resolve, rejectํจ์๋ฅผ ์์ฑํ์ง๋ ์์๊ณ ๋ด๊ฐ ๋งค๊ฐ๋ณ์๋ก ๋๊ฒจ์ค ํจ์๊ฐ ์๋๋ฐ, ์ด๋ป๊ฒ ์ฝ๋ฐฑ์ด ๋๋ ๊ฑฐ์ง ํ๊ณ ์๊ฐ์ด ๋ง์๋ค.
resolve, reject๋ ์ ๊ทธ๋ฆผ์ฒ๋ผ ์ด๋ฏธ ์ ์๊ฐ ๋์ด์๋ ํจ์์ด์ ๋ก์ง์ธ๊ฑธ ์๊ฐํด ๋ณด๋๊น ์ดํด๊ฐ ๋์๋ค..