๐ก ์ฝ๋ฐฑ ์ง์ฅ (Callback Hell) ?

์๋ฐ์คํฌ๋ฆฝํธ๋ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ ๋, ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
๋ง์ฝ, ๋น๋๊ธฐ ์์ ์ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ง๊ณ ์ฝ๋ฐฑ ๋ด๋ถ์์ ๋๋ค๋ฅธ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
์ ์ฌ์ง์ฒ๋ผ ์ฝ๋ฐฑ์ ์ฝ๋ฐฑ์ด ์ค์ฒฉ๋๋ฉด์ ์ฝ๋์ ๊ฐ๋ ์ฑ์ด ๋๋น ์ง๊ณ ์ ์ง๋ณด์๋ ์ด๋ ค์์ง๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ "์ฝ๋ฐฑ ์ง์ฅ" ์ด๋ผ๊ณ ํ๋ค.
๊ทธ๋ ๋ค๋ฉด ์ ์ฝ๋์ฒ๋ผ ์ฝ๋ฐฑ์ง์ฅ์์ ๋ฒ์ด๋๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ๋ ๊ฑธ๊น?
๐ก Promise
- Promise๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ์ฌ์ฉ๋๋ ๊ฐ์ฒด์ด๋ค.
- ์ฝ๋ฐฑ ํจํด์ด ๊ฐ์ง ๋จ์ ์ ๋ณด์ํ๊ณ ๋น๋๊ธฐ ์ฒ๋ฆฌ ์์ ์ ๋ช ํํ๊ฒ ํํํ ์ ์๋ค๋ ์ฅ์ ์ด ์๋ค.
โ Promise์ 3๊ฐ์ง ์ํ
ํ๋ก๋ฏธ์ค๋ ๋น๋๊ธฐ ์์ ์ ๊ฒฐ๊ณผ๋ฅผ ์ฝ์ํ๋ค.
ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ฉด, ๋น๋๊ธฐ ์์ ์ ์งํ์ค์ด๊ฑฐ๋, ์ฑ๊ณตํ๊ฑฐ๋, ์คํจํ๋ค.
์ด๋ฌํ ์ํ๋ฅผ ๋ํ๋ด๋ ๊ฒ์ด ํ๋ก๋ฏธ์ค์ ์ํ(State)๋ผ๊ณ ํ๋ค.

1) Pending(๋๊ธฐ ์ํ)
๋น๋๊ธฐ ์์ ์ด ์งํ ์ค์ด๊ฑฐ๋, ์์ํ ์ ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ํ
2) Fulfilled(์ฑ๊ณต)
๋น๋๊ธฐ ์์ ์ด ์๋ํ๋๋ก ์ ์์ ์ผ๋ก ์๋ฃ๋ ์ํ
3) Rejected(์คํจ)
๋น๋๊ธฐ ์์ ์ด ๋ชจ์ข ์ ์ด์ ๋ก ์คํจํ ์ํ.
ex) ์๋ฒ์๋ต X. ์๊ฐ์ด ๋๋ฌด ์ค๋ ๊ฑธ๋ฆฌ๋ ๊ฒฝ์ฐ...
โ Promise ์์ฑ๋ฒ
- new ํค์๋์ Promise ์์ฑ์ ํจ์๋ฅผ ์ฌ์ฉํด ๋ง๋ค ์ ์๋ค.
- Promise ์์ฑ์ ํจ์์๋ ์ฝ๋ฐฑํจ์๋ฅผ ๋ฃ๋๋ค. ์ด๋, ์ฝ๋ฐฑ ํจ์๋ฅผ executor ๋ผ๊ณ ๋ถ๋ฅธ๋ค.
- executor๋ 2๊ฐ์ ๋งค๊ฐ๋ณ์๋ฅผ ๊ฐ์ง๋ค.
- ์ฒซ ๋ฒ์งธ ์ธ์๋ ์ฑ๊ณต์ ๋ปํ๋ resolve ํจ์, ๋ ๋ฒ์งธ ์ธ์๋ ์คํจ๋ฅผ ๋ปํ๋ reject ํจ์ ์ด๋ค.
function promiseA() {
const executor = (resolve, reject) => {
if (/*์ฑ๊ณต์กฐ๊ฑด*/) {
resolve(/*๊ฒฐ๊ณผ๊ฐ*/)
} else {
reject(/*์๋ฌ๊ฐ*/)
}
}
return new Promise(executor)
}
์ ์ฝ๋์ promiseA์ ๋ฐํ๊ฐ์ Promise ๊ฐ์ฒด์ด๋ค. ๊ทธ๋ผ ์ด ๊ฐ์ฒด๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ ์์๊น?
โ Promise ๊ฐ์ฒด ์ฒ๋ฆฌ
Promise ๊ฐ์ฒด์ ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋ ํ ์์ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ๋ฉ์๋ ์ฒด์ด๋์ ํตํด ํ์ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค.
- ์ฒ๋ฆฌ ์ฑ๊ณต ์
- resolve(๊ฒฐ๊ณผ๊ฐ) ํธ์ถ
- .then() ์ผ๋ก ์ด์ด์ ธ ์ฑ๊ณต์ ๋ํ ์ถ๊ฐ ์ฒ๋ฆฌ ์งํ
- .then() ์ resolve ํจ์์ argument ๊ฐ์ด then ์ธ์๋ก ๋ค์ด๊ฐ๋ค.
- ex) resolve(data) -> .then(data) ๋ก ์ฌ์ฉ๊ฐ๋ฅ
- ์ฒ๋ฆฌ ์คํจ ์
- reject() ํธ์ถ
- .catch() ๋ก ์ด์ด์ ธ ์คํจ์ ๋ํ ์ถ๊ฐ ์ฒ๋ฆฌ ์งํ
- resolve์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌํ ๊ฐ์ catch์ ์ธ์๋ก ๋ฐ์ ํธ๋ค๋ง์ด ๊ฐ๋ฅํ๋ค.
function promiseA () {
return new Promise((resolve, reject)=>{
if (/* ์ฑ๊ณต์กฐ๊ฑด */) {
resolve(/* ๊ฒฐ๊ณผ ๊ฐ */)
} else {
reject(/* ์๋ฌ ๊ฐ */)
}
})
}
promiseA()
.then((res)=>{
// ์ฑ๊ณต ์ ์คํํ ์ฝ๋ฐฑ ํจ์ -> ๊ฒฐ๊ณผ ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅ
})
.catch((err)=>{
// ์คํจ ์ ์คํํ ์ฝ๋ฐฑ ํจ์ -> ์๋ฌ ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅ
})
โ Promise ์ฌ๋ฌ๊ฐ ์ฌ์ฉํ๊ธฐ
์ฌ๋ฌ ๊ฐ์ ๋น๋๊ธฐ ์์ ์ ์์ฐจ์ ์ผ๋ก ํ๋ ๋ฐฉ๋ฒ์ด ์์๊น?
์ ๋ต์ ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ์ฐ๋ฌ์ ์ฐ๊ฒฐํ๋ ๊ฒ์ด๋ค.
๋น๋๊ธฐ ํจ์ A, B, C ๊ฐ ์๋ค.
์์๋๋ก A->B->C ์์ผ๋ก ์คํ๋๋ค๊ณ ๊ฐ์ ํ์ ๋, A์ ๊ฒฐ๊ณผ๊ฐ์ผ๋ก B๋ฅผ ์คํํ๊ณ B์ ๊ฒฐ๊ณผ๊ฐ์ผ๋ก C๋ฅผ ์คํํ๊ณ ์ ํ๋ค.
- ํจ์ A ๋ ์คํ ์, 3์ด ๋ค ๋ ๊ฐ์ ์ ๋ ฅ๊ฐ a, b๋ฅผ ๋ํ ๊ฐ์ ๊ฒฐ๊ณผ ๊ฐ์ผ๋ก ํ๋ค.
- ํจ์ B ๋ ์คํ ์, 1์ด ๋ค ์ ๋ ฅ๊ฐ a์ 2๋ฅผ ๊ณฑํ ๊ฐ์ ๊ฒฐ๊ณผ ๊ฐ์ผ๋ก ํ๋ค.
- ํจ์ C ๋ ์คํ ์, 2์ด ๋ค ์ ๋ ฅ๊ฐ a์ -1๋ฅผ ๊ณฑํ ๊ฐ์ ๊ฒฐ๊ณผ ๊ฐ์ผ๋ก ํ๋ค.
ํจ์ A, B, C๋ก ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ฉด ์๋์ ๊ฐ๋ค.
function promiseA(a, b) {
return new Promise((resolve, reject) => {
setTimeOut(()=>{ resolve(a+b) }, 3000)
})
}
function promiseB(a) {
return new Promise((resolve, reject) => {
setTimeOut(()=>{ resolve(a*2) }, 1000)
})
}
function promiseC(a) {
return new Promise((resolve, reject) => {
setTimeOut(()=>{ resolve(a*-1) }, 2000)
})
}
- ํจ์ A ์ ๊ฒฐ๊ณผ ๊ฐ์ผ๋ก B๋ฅผ ์คํํ๋ค.
- ํจ์ B ์ ๊ฒฐ๊ณผ ๊ฐ์ผ๋ก C๋ฅผ ์คํํ๋ค.
- ๊ฐ ํจ์๋ ๊ฒฐ๊ณผ ๊ฐ ๋์ถ ์, ํ์ฌ์ ๊ฒฐ๊ณผ๊ฐ์ ์ฝ์์ ๋์ด๋ค.
์ ์กฐ๊ฑด์ผ๋ก 3๊ฐ์ ํจ์๋ฅผ ํ๋ก๋ฏธ์ค๋ก ์ฐ๋ฌ์ ์ฌ์ฉํด๋ณด์.
promiseA(3,5)
.then((a_res)=>{
console.log('A ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : ', a_res); // 3์ด ๋ค, A ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : 8
return promiseB(a_res);
})
.then((b_res)=>{
console.log('B ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : ', b_res); // 1์ด ๋ค, B ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : 16
return promiseC(b_res);
})
.then((c_res)=>{
console.log('C ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : ', c_res); // 2์ด ๋ค, C ํจ์์ ๊ฒฐ๊ณผ ๊ฐ : -16
})
ํต์ฌ์ return์ผ๋ก promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ๊ฒ์ด๋ค.
promise ๊ฐ์ฒด๋ then์ผ๋ก ์ ๊ทผ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์์ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋ค.
'Frontend > Javascript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Javascript] async์ await (0) | 2024.02.15 |
---|---|
[Javascript] ๊ฐ์ฒด์ ๋ฐฐ์ด์ ๊ตฌ์กฐ ๋ถํด ํ ๋น(Destructuring Assignment) (1) | 2023.10.05 |
[Javascript] Truthy & Falsy / ๋จ๋ฝํ๋กํ๊ฐ (Short Circuit Evaluation) (0) | 2023.10.04 |
[Javascript] ๊ฐ์ฒด(Object)๋? ์ ์ธ๋ฒ๊ณผ ์ถ๊ฐ,์ญ์ ,์์ ๋ฐฉ๋ฒ (1) | 2023.10.02 |
[Javascript] ๋ฐฐ์ด(Array)์ด๋? ๋ฐฐ์ด ์ ์ธ๋ฐฉ๋ฒ 2๊ฐ์ง (0) | 2023.09.26 |