μμ¦ REST API κ° κ΅μ₯ν μ ννκ³ μλ€.
μλ²μ ν΄λΌμ΄μΈνΈλ₯Ό μμ ν λΆλ¦¬νκ³ , μλ² μ£Όμλ‘λ§ ν΅μ νλ μν λΆλ¦¬κ° νμ€νκ² λλλΌ.
μ΄λ μ¬μ©νλκ² λΉλκΈ° ν΅μ λΌμ΄λΈλ¬λ¦¬ axios μ΄λ€.
axiosλ₯Ό μ¬μ©νλ©΄μ λΉλκΈ° μ²λ¦¬μ λν΄ κ³΅λΆνκ² λμλλ°, μ΄ν΄ν λ΄μ©λ€μ κ°λ¨νκ² μ 리ν΄λ³΄μλ€.
λΉλκΈ°λ?
λΉλκΈ°, λκΈ°λ μλ ν΅μ κ³Ό κ΄λ ¨λ μ©μ΄λ€. λ¬Όλ‘ ν΅μ μμμ κ°λ μ λκ³ μ€μ§λ μκ³ ... μμ£Ό κ°λ΅νκ² μ€λͺ νμλ©΄,
λκΈ°λ μ΄μ μμ μ΄ λλμΌ λ€μ μμ μ΄ μ€νλλ κ², μμ°¨μ μΌλ‘ μ€νλλ κ²μ΄κ³
λΉλκΈ°λ μ΄μ μμ μν μ€μλ λ€λ₯Έ μμ μ μν ν μ μκ² νλ κ², μμ μ΄ μμ°¨μ μΌλ‘ μ€νλμ§ μλ κ²μ΄λ€.
μμλ₯Ό λ€μλ©΄,
a μμ -> μλ² ν΅μ -> b μμ -> cμμ μ΄ μμ λ
μλ² ν΅μ μ λκΈ°μ μΌλ‘ μννλ€λ©΄ aμμ μ’ λ£ ν μλ² ν΅μ , μλ²ν΅μ μ’ λ£ ν bμμ , bμμ μ’ λ£ ν cμμ μ νλ€.
μλ²ν΅μ μ λΉλκΈ°μ μΌλ‘ μννλ€λ©΄ aμμ μ’ λ£ ν μλ² ν΅μ , μλ² ν΅μ μ€μ b μμ μ νλ©° μλ² ν΅μ μ’ λ£ νμ΄λ°μ bμμ μ΄ λλκΈ° μ μΌμ§ λλ νμΌμ§λ₯Ό 보μ₯ν μ μλ€. bμμ μ΄ μ’ λ£λλ©΄ cμμ μ νλ€.

jsμμ λκΈ°, λΉλκΈ° μμ μ λνμ μΈ μμλ λ€μκ³Ό κ°λ€.
λκΈ° μμ μ μΌλ°μ μΌλ‘ μ°λ¦¬κ° μ λ μ½λμ΄λ€. μ΄ μ½λλ€μ μμ°¨μ μΌλ‘ μ€νλλ€.
λΉλκΈ° μμ μ setTimeout, setInterval, EventLietner λ±μ΄ μλ€.
νΉμ μκ°μ΄ μ§λ ν νΉμ μ½λκ° μ€νλλ©°, μ΄ μκ°λμ λ€λ₯Έ μμ λ μ€νλλ€.
λ λ€λ₯Έ μμ μ΄ μ€νλλ λμ νΉμ μ΄λ²€νΈκ° λ€μ΄μ¬ λκΉμ§ κΈ°λ€λ¦°λ€.
λΉλκΈ° μμ μ κ²°κ³Όλ μ΄λ»κ² μ²λ¦¬ν κΉ?
λκΈ° μμ μ μ§κ΄μ μ΄λ€. μ΄μ μ€νμ κ²°κ³Όκ° λμ€λ©΄, κ·Έ λ€μ μ€νμ νκΈ° λλ¬Έμ μ΄λ€ μμ μ μμλ₯Ό μ νκ³ μΆλ€λ©΄ μμ°¨μ μΌλ‘ μ½λλ₯Ό μ κΈ°λ§ νλ©΄ λλ€.
λΉλκΈ° μμ μ... λΉλκΈ° μμ μ΄ λλμ§ μμμμλ κ·Έ λ€μ μμ μ΄ μμλλ€.
λ§μ½ λΉλκΈ° μμ μ κ²°κ³Όλ₯Ό κ·Έ λ€μ μμ μ μ΄μ©νκ³ μΆλ€λ©΄ μ΄λ»κ² ν΄μΌν κΉ?
λ΅μ κ°λ¨νλ€. λΉλκΈ° μμ κ³Ό κ·Έ μ΄ν μμ μ λ§μΉ λκΈ° μμ μ²λΌ λμνλλ‘ λ§λ€μ΄μ€μΌ νλ€.
μ¬κΈ°μ λ€λ£° promise, async, await ν€μλλ€μ λΉλκΈ° μμ μ λ§μΉ λκΈ°μ μΌλ‘, μ¦ λΉλκΈ° μμ μ΄ λλ ν νΉμ μμ λ€μ μ€νν μ μλλ‘ μμλ₯Ό μ ν΄μ£Όλ κ²λ€μ΄λ€.

μ¬κΈ°μ promise, async, await λ₯Ό κΉκ² λ€λ£¨μ§λ μλλ€.
λΉλκΈ° μμ μ΄ μΈμ λλλμ§ μλ €μ£Όλ Promise κ°μ²΄
Promise λ κ°μ²΄λ λΉλκΈ° μμ μ΄ λλ ν κ²°κ³Όλ₯Ό μλ €μ£Όλ μ©λλ‘ μ¬μ©νλ€.
λ§ κ·Έλλ‘... 'λΉλκΈ° μμ λλλ©΄ μλ €μ£Όκ² λ€κ³ μ½μν κ²~' λΌλ μλ―Έλ€.
Promise λ₯Ό μ¬μ©νλ©΄ λΉλκΈ° μμ μ΄ λλ μμ μ μ μ μμ΄ λκΈ°μμ μ²λΌ ꡬμ±ν μ μκ² λλ€.
Promise κ°μ²΄λ λκΈ°, μ΄ν, κ±°λΆ μ΄ μΈ κ°μ§ μνλ₯Ό κ°μ§λ€.
κ°κ° μμ μλ£ μ , μμ μλ£ ν, μλ¬ λ°μνμ¬ μ€ν¨ λΌλ λ»μ΄λ€.
μ¬μ©νλ λ°©λ²μ κ°λ¨νλ€. λΉλκΈ° μμ μ΄ μμ μ’ λ£ ν Promise κ°μ²΄λ₯Ό λ°ννλλ‘ νκ³ ,
Promise κ°μ²΄κ° μ 곡νλ then, catch λ₯Ό μ΄μ©νλ©΄ λλ€.
μ¬κΈ°μλ promise κ°μ²΄λ₯Ό μ΄λ»κ² λ§λ€κ³ , κ΄λ ¨λ λ€μν ν¨μλ₯Ό 보μ¬μ£Όκ³ ... νλ λ΄μ©μ λΉΌλκ³ (axios λ₯Ό μν κΈμ΄λκΉ γ γ )
λ¨μν μ΄ μνλ₯Ό μ΄λ»κ² μ²λ¦¬νλ μ§λ μμλ₯Ό 보μ¬μ£Όκ² λ€.
const promise = //Promise λ₯Ό λ°ννλ μ΄λ€ λΉλκΈ° μμ
..
promise.then((result) => console.log('μ±κ³΅!!').catch((error) => console.log('μ€ν¨..')
promise κ°μ²΄μ .then() μ λΆμ΄λ©΄ μ΄ν μνμ μ²λ¦¬λ₯Ό ν μ μκ³
.catch λ₯Ό λΆμ΄λ©΄ μ€ν¨ μνλ₯Ό μ²λ¦¬ν μ μλ€.
μ°Έ μ½μ£ ?
μ°Έκ³ λ‘, λλΆλΆμ λΉλκΈ° μμ λ€μ Promise κ°μ²΄λ₯Ό λ°ννλ€.
async, await
Promise κ°μ²΄λ₯Ό μ¬μ©νλλΌλ .then() .catch() λ±λ± λ€μ λΆμ΄λ κ²λ€μ΄ λ§μμ§λ€.
λ€μ λ μ λΆμ΄κ³ , λ κ°λ¨νκ² λΉλκΈ° μμ μ λκΈ°μ μΌλ‘ λ§λ€μ΄μ£Όλ ν€μλκ° λ°λ‘ await μ΄λ€.
μλ μ¬μ©λ²μ΄ λ κ°λ¨νλ€.
λΉλκΈ° μμ μμ await ν€μλλ₯Ό λΆμ΄λ©΄, λΉλκΈ° μμ μ΄ κ²°κ³Όλ₯Ό λΌ λκΉμ§ κΈ°λ€λ¦°λ€.
λ§ κ·Έλλ‘ κΈ°λ€λ¦°λ€λ μλ―Έλ₯Ό κ°μ‘λ€ γ γ
μ¬κΈ°μ κΈ°λ€λ¦°λ€λ μλ―Έλ, λͺ¨λ μμ μ΄ μ’ λ£λλ€λ μλ―Έκ° μλλΌ... λ΄κ° μ¬μ©ν κ²°κ³Όκ°μ΄ λμ¬ λκΉμ§ κΈ°λ€λ¦°λ€λ μλ―Έλ€.
λ©μΈ μμ λ€μ λ©μΆμ§ μκ³ awaitμ ν¬ν¨νκ³ μλ ν¨μλ§ μΌμμ μ§λλ€.
await λ νΌμλ§ μΈ μ μλ€.
await μ μΈνΈλ‘ μ°λ κ²μ΄ μλλ°.. λ°λ‘ async ν€μλλ€.
async λ νΉμ ν¨μλ₯Ό λΉλκΈ°λ‘ λ§λλ ν€μλλ€. await μ μΈνΈλ‘ μ°λ μ΄μ λ, λ΄κ° μ΄ν΄νκΈ°μ
1. λΉλκΈ° μμ μ ν¬ν¨νκ³ μκΈ° λλ¬Έμ κ·Έ ν¨μλ λΉλκΈ°μ¬μΌ νλ€.
2. await μΌλ‘ κ·Έ ν¨μλ§ μΌμμ μ§νλ―λ‘, κ²°κ΅ μ΄κ²λ λΉλκΈ°λ€.
μ΄λ° μ΄μ λλ¬Έμ΄ μλκΉ νλ€.
κ·Έλ¦¬κ³ async λ₯Ό λΆμ΄λ©΄ κ·Έ ν¨μλ Promise κ°μ²΄λ₯Ό λ°ννλ€. λΉλκΈ° μμ μ΄ λλκΉ!
μλ¬΄νΌ μμ½νμλ©΄, λκΈ°μ μΌλ‘ μ²λ¦¬ν μΌμ΄ μλ λΉλκΈ° μμ μ await λ₯Ό λΆμ΄κ³ , ν΄λΉ μμ μ ν¬ν¨νκ³ μλ ν¨μμ async λ₯Ό λΆμ΄λ©΄ λλ€.

λΉλκΈ° ν΅μ λΌμ΄λΈλ¬λ¦¬
axios λ μ΄ Promise κΈ°λ°, μ¦ λΉλκΈ° κΈ°λ°μΌλ‘ μλ²μ ν΅μ ν μ μλ λΌμ΄λΈλ¬λ¦¬λ€.
async-await-promise-axios λ₯Ό μΈνΈλ‘ μ°λ κ²½μ°κ° λ§μλ°,
μλ²μ ν΅μ νλ μ΄μ λ λ°μ΄ν°λ₯Ό λ°μμ€κ³ , μ‘°μνκΈ° μν΄μμ΄κ³
μ΄ μμ λ€μ λ³΄ν΅ λκΈ°μ μΌλ‘ μνν μΌμ΄ λ§κΈ° λλ¬Έμ΄λ€.
λ‘κ·ΈμΈμΌλ‘ μμλ₯Ό λ€μλ©΄,
λ¨Όμ μ¬μ©μμ νλ©΄μ΄ λ©μΆμ§ μκ³ μλ²μ λ‘κ·ΈμΈ μμ²μ 보λ΄μΌ νλ€. μ΄λ° κ²½μ° λΉλκΈ° ν΅μ μ μ¨μΌ νλ€.
νλ©΄μ λ‘λ©λ°λ₯Ό κ·Έλ¦¬κ³ , κ·Έλ¬λ λμ μλ²μ λ‘κ·ΈμΈ μμ²μ 보λ΄μΌ νλκΉ..
λ§μ½ λκΈ°μ μΌλ‘ μννλ€λ©΄ νλ©΄μ΄ λ©μΆκ³ μλ²μ λ‘κ·ΈμΈ μμ²μ΄ κ°λ€.
λ μλ²μ λ‘κ·ΈμΈμ 보λμ λ μλ£λμλ€λ κ²°κ³Όκ°μ λ°κ³ λμ λ‘κ·ΈμΈ μλ£κ° λμ΄μΌ νλ€.
μ¦, κ²°κ³Όλ°μ -> λ‘κ·ΈμΈ μλ£ λ λκΈ°μ μΌλ‘ μνλμ΄μΌ νλ€.
μ΄λ λΉλκΈ° μμ μ λκΈ°μ μΌλ‘ μνν μ μλλ‘ async, await μ μ΄λ€.
μμ£Όμμ£Όμμ£Ό κ°λ¨ν μμ μ½λλ₯Ό κ°μ Έμλ€.
const getData = async() => {
const {data:result} = await axios.get("server adress");
return result;
}
νμ΄ν ν¨μ μμ async λ₯Ό λΆμ¬ λΉλκΈ° μ μΈμ νλ€.
axios λ μλ²μ λΉλκΈ°λ‘ ν΅μ νλ ν΅μ λΌμ΄λΈλ¬λ¦¬λ€. axios.get μ μΈμλ‘ μ μ μλ²μμ get μμ²μ 보λΈλ€.
μ΄ λΉλκΈ° ν΅μ μ λκΈ°μ μΌλ‘ μννκ³ μΆμΌλ μμ await λ₯Ό λΆμΈλ€.
get μμ²μ κ²°κ³Όλ ν€λμ λ°μ΄ν°λ€λ‘ ꡬμ±λμ΄ μμΌλ―λ‘, μ°λ¦¬κ° νμν λ°μ΄ν°λ§ λ½μλ΄κΈ° μν΄ κ΅¬μ‘°λΆν΄ν λΉμΌλ‘ result λ³μμ λ΄λλ€.
λ§μ½ μ΄κ²μ κ·Έλ₯ λΉλκΈ° ν΅μ μΌλ‘ μννλ€λ©΄, result μ μλ¬΄λ° κ°μ΄ μλ μνμμ 무μΈκ°κ° μ²λ¦¬λλ€.
κ·Έλ¬λ λΉλκΈ° ν΅μ μ λκΈ°μ μΌλ‘ μννκ³ μ awaitμ λΆμμΌλ, μλ²μ λ°μ΄ν°λ₯Ό λ°μμ€λ λμμλ μμ μ΄ μΌμμ€μ§λλ€.
κ·Έλ¦¬κ³ μλ²μ κ²°κ³Όλ₯Ό λ°μμ€κ³ λμμΌ Result μ κ°μ΄ λ€μ΄κ°λ€.
μμμ λ§λ getData λ₯Ό λ€λ₯Έ κ³³μμ μ¬μ©νκ³ μΆλ€λ©΄?
μ 보면... getData λ λΉλκΈ° ν¨μλ€. μλλ©΄ async λ‘ μ μΈλμμΌλκΉ.
κ·Έλ¬λ λκ°μ΄ await μΌλ‘ μ²λ¦¬ν΄μ£Όλ©΄ λλ€.
const getData = async() => {
const {data:result} = await axios.get("server adress");
return result;
}
...
<div onClick = {async() => console.log(await getData());}> </div>
μλ©΄ μ½κ³ λͺ¨λ₯΄λ©΄ μ΄λ €μ΄ λΉλκΈ° ν΅μ ...
λ¬Όλ‘ promise, axios λ₯Ό νμ©νλ λ°©λ²μ 무κΆλ¬΄μ§νλ€.
νμ§λ§ μ΄ κΈμμ λ€λ£¨λ λ²μλ₯Ό λ²μ΄λλ...λ€μμ μΈ μΌμ΄ μκΈ°λ©΄ μ μ΄λ΄μΌκ² λ€.
μμ¦ REST API κ° κ΅μ₯ν μ ννκ³ μλ€.
μλ²μ ν΄λΌμ΄μΈνΈλ₯Ό μμ ν λΆλ¦¬νκ³ , μλ² μ£Όμλ‘λ§ ν΅μ νλ μν λΆλ¦¬κ° νμ€νκ² λλλΌ.
μ΄λ μ¬μ©νλκ² λΉλκΈ° ν΅μ λΌμ΄λΈλ¬λ¦¬ axios μ΄λ€.
axiosλ₯Ό μ¬μ©νλ©΄μ λΉλκΈ° μ²λ¦¬μ λν΄ κ³΅λΆνκ² λμλλ°, μ΄ν΄ν λ΄μ©λ€μ κ°λ¨νκ² μ 리ν΄λ³΄μλ€.
λΉλκΈ°λ?
λΉλκΈ°, λκΈ°λ μλ ν΅μ κ³Ό κ΄λ ¨λ μ©μ΄λ€. λ¬Όλ‘ ν΅μ μμμ κ°λ μ λκ³ μ€μ§λ μκ³ ... μμ£Ό κ°λ΅νκ² μ€λͺ νμλ©΄,
λκΈ°λ μ΄μ μμ μ΄ λλμΌ λ€μ μμ μ΄ μ€νλλ κ², μμ°¨μ μΌλ‘ μ€νλλ κ²μ΄κ³
λΉλκΈ°λ μ΄μ μμ μν μ€μλ λ€λ₯Έ μμ μ μν ν μ μκ² νλ κ², μμ μ΄ μμ°¨μ μΌλ‘ μ€νλμ§ μλ κ²μ΄λ€.
μμλ₯Ό λ€μλ©΄,
a μμ -> μλ² ν΅μ -> b μμ -> cμμ μ΄ μμ λ
μλ² ν΅μ μ λκΈ°μ μΌλ‘ μννλ€λ©΄ aμμ μ’ λ£ ν μλ² ν΅μ , μλ²ν΅μ μ’ λ£ ν bμμ , bμμ μ’ λ£ ν cμμ μ νλ€.
μλ²ν΅μ μ λΉλκΈ°μ μΌλ‘ μννλ€λ©΄ aμμ μ’ λ£ ν μλ² ν΅μ , μλ² ν΅μ μ€μ b μμ μ νλ©° μλ² ν΅μ μ’ λ£ νμ΄λ°μ bμμ μ΄ λλκΈ° μ μΌμ§ λλ νμΌμ§λ₯Ό 보μ₯ν μ μλ€. bμμ μ΄ μ’ λ£λλ©΄ cμμ μ νλ€.

jsμμ λκΈ°, λΉλκΈ° μμ μ λνμ μΈ μμλ λ€μκ³Ό κ°λ€.
λκΈ° μμ μ μΌλ°μ μΌλ‘ μ°λ¦¬κ° μ λ μ½λμ΄λ€. μ΄ μ½λλ€μ μμ°¨μ μΌλ‘ μ€νλλ€.
λΉλκΈ° μμ μ setTimeout, setInterval, EventLietner λ±μ΄ μλ€.
νΉμ μκ°μ΄ μ§λ ν νΉμ μ½λκ° μ€νλλ©°, μ΄ μκ°λμ λ€λ₯Έ μμ λ μ€νλλ€.
λ λ€λ₯Έ μμ μ΄ μ€νλλ λμ νΉμ μ΄λ²€νΈκ° λ€μ΄μ¬ λκΉμ§ κΈ°λ€λ¦°λ€.
λΉλκΈ° μμ μ κ²°κ³Όλ μ΄λ»κ² μ²λ¦¬ν κΉ?
λκΈ° μμ μ μ§κ΄μ μ΄λ€. μ΄μ μ€νμ κ²°κ³Όκ° λμ€λ©΄, κ·Έ λ€μ μ€νμ νκΈ° λλ¬Έμ μ΄λ€ μμ μ μμλ₯Ό μ νκ³ μΆλ€λ©΄ μμ°¨μ μΌλ‘ μ½λλ₯Ό μ κΈ°λ§ νλ©΄ λλ€.
λΉλκΈ° μμ μ... λΉλκΈ° μμ μ΄ λλμ§ μμμμλ κ·Έ λ€μ μμ μ΄ μμλλ€.
λ§μ½ λΉλκΈ° μμ μ κ²°κ³Όλ₯Ό κ·Έ λ€μ μμ μ μ΄μ©νκ³ μΆλ€λ©΄ μ΄λ»κ² ν΄μΌν κΉ?
λ΅μ κ°λ¨νλ€. λΉλκΈ° μμ κ³Ό κ·Έ μ΄ν μμ μ λ§μΉ λκΈ° μμ μ²λΌ λμνλλ‘ λ§λ€μ΄μ€μΌ νλ€.
μ¬κΈ°μ λ€λ£° promise, async, await ν€μλλ€μ λΉλκΈ° μμ μ λ§μΉ λκΈ°μ μΌλ‘, μ¦ λΉλκΈ° μμ μ΄ λλ ν νΉμ μμ λ€μ μ€νν μ μλλ‘ μμλ₯Ό μ ν΄μ£Όλ κ²λ€μ΄λ€.

μ¬κΈ°μ promise, async, await λ₯Ό κΉκ² λ€λ£¨μ§λ μλλ€.
λΉλκΈ° μμ μ΄ μΈμ λλλμ§ μλ €μ£Όλ Promise κ°μ²΄
Promise λ κ°μ²΄λ λΉλκΈ° μμ μ΄ λλ ν κ²°κ³Όλ₯Ό μλ €μ£Όλ μ©λλ‘ μ¬μ©νλ€.
λ§ κ·Έλλ‘... 'λΉλκΈ° μμ λλλ©΄ μλ €μ£Όκ² λ€κ³ μ½μν κ²~' λΌλ μλ―Έλ€.
Promise λ₯Ό μ¬μ©νλ©΄ λΉλκΈ° μμ μ΄ λλ μμ μ μ μ μμ΄ λκΈ°μμ μ²λΌ ꡬμ±ν μ μκ² λλ€.
Promise κ°μ²΄λ λκΈ°, μ΄ν, κ±°λΆ μ΄ μΈ κ°μ§ μνλ₯Ό κ°μ§λ€.
κ°κ° μμ μλ£ μ , μμ μλ£ ν, μλ¬ λ°μνμ¬ μ€ν¨ λΌλ λ»μ΄λ€.
μ¬μ©νλ λ°©λ²μ κ°λ¨νλ€. λΉλκΈ° μμ μ΄ μμ μ’ λ£ ν Promise κ°μ²΄λ₯Ό λ°ννλλ‘ νκ³ ,
Promise κ°μ²΄κ° μ 곡νλ then, catch λ₯Ό μ΄μ©νλ©΄ λλ€.
μ¬κΈ°μλ promise κ°μ²΄λ₯Ό μ΄λ»κ² λ§λ€κ³ , κ΄λ ¨λ λ€μν ν¨μλ₯Ό 보μ¬μ£Όκ³ ... νλ λ΄μ©μ λΉΌλκ³ (axios λ₯Ό μν κΈμ΄λκΉ γ γ )
λ¨μν μ΄ μνλ₯Ό μ΄λ»κ² μ²λ¦¬νλ μ§λ μμλ₯Ό 보μ¬μ£Όκ² λ€.
const promise = //Promise λ₯Ό λ°ννλ μ΄λ€ λΉλκΈ° μμ
..
promise.then((result) => console.log('μ±κ³΅!!').catch((error) => console.log('μ€ν¨..')
promise κ°μ²΄μ .then() μ λΆμ΄λ©΄ μ΄ν μνμ μ²λ¦¬λ₯Ό ν μ μκ³
.catch λ₯Ό λΆμ΄λ©΄ μ€ν¨ μνλ₯Ό μ²λ¦¬ν μ μλ€.
μ°Έ μ½μ£ ?
μ°Έκ³ λ‘, λλΆλΆμ λΉλκΈ° μμ λ€μ Promise κ°μ²΄λ₯Ό λ°ννλ€.
async, await
Promise κ°μ²΄λ₯Ό μ¬μ©νλλΌλ .then() .catch() λ±λ± λ€μ λΆμ΄λ κ²λ€μ΄ λ§μμ§λ€.
λ€μ λ μ λΆμ΄κ³ , λ κ°λ¨νκ² λΉλκΈ° μμ μ λκΈ°μ μΌλ‘ λ§λ€μ΄μ£Όλ ν€μλκ° λ°λ‘ await μ΄λ€.
μλ μ¬μ©λ²μ΄ λ κ°λ¨νλ€.
λΉλκΈ° μμ μμ await ν€μλλ₯Ό λΆμ΄λ©΄, λΉλκΈ° μμ μ΄ κ²°κ³Όλ₯Ό λΌ λκΉμ§ κΈ°λ€λ¦°λ€.
λ§ κ·Έλλ‘ κΈ°λ€λ¦°λ€λ μλ―Έλ₯Ό κ°μ‘λ€ γ γ
μ¬κΈ°μ κΈ°λ€λ¦°λ€λ μλ―Έλ, λͺ¨λ μμ μ΄ μ’ λ£λλ€λ μλ―Έκ° μλλΌ... λ΄κ° μ¬μ©ν κ²°κ³Όκ°μ΄ λμ¬ λκΉμ§ κΈ°λ€λ¦°λ€λ μλ―Έλ€.
λ©μΈ μμ λ€μ λ©μΆμ§ μκ³ awaitμ ν¬ν¨νκ³ μλ ν¨μλ§ μΌμμ μ§λλ€.
await λ νΌμλ§ μΈ μ μλ€.
await μ μΈνΈλ‘ μ°λ κ²μ΄ μλλ°.. λ°λ‘ async ν€μλλ€.
async λ νΉμ ν¨μλ₯Ό λΉλκΈ°λ‘ λ§λλ ν€μλλ€. await μ μΈνΈλ‘ μ°λ μ΄μ λ, λ΄κ° μ΄ν΄νκΈ°μ
1. λΉλκΈ° μμ μ ν¬ν¨νκ³ μκΈ° λλ¬Έμ κ·Έ ν¨μλ λΉλκΈ°μ¬μΌ νλ€.
2. await μΌλ‘ κ·Έ ν¨μλ§ μΌμμ μ§νλ―λ‘, κ²°κ΅ μ΄κ²λ λΉλκΈ°λ€.
μ΄λ° μ΄μ λλ¬Έμ΄ μλκΉ νλ€.
κ·Έλ¦¬κ³ async λ₯Ό λΆμ΄λ©΄ κ·Έ ν¨μλ Promise κ°μ²΄λ₯Ό λ°ννλ€. λΉλκΈ° μμ μ΄ λλκΉ!
μλ¬΄νΌ μμ½νμλ©΄, λκΈ°μ μΌλ‘ μ²λ¦¬ν μΌμ΄ μλ λΉλκΈ° μμ μ await λ₯Ό λΆμ΄κ³ , ν΄λΉ μμ μ ν¬ν¨νκ³ μλ ν¨μμ async λ₯Ό λΆμ΄λ©΄ λλ€.

λΉλκΈ° ν΅μ λΌμ΄λΈλ¬λ¦¬
axios λ μ΄ Promise κΈ°λ°, μ¦ λΉλκΈ° κΈ°λ°μΌλ‘ μλ²μ ν΅μ ν μ μλ λΌμ΄λΈλ¬λ¦¬λ€.
async-await-promise-axios λ₯Ό μΈνΈλ‘ μ°λ κ²½μ°κ° λ§μλ°,
μλ²μ ν΅μ νλ μ΄μ λ λ°μ΄ν°λ₯Ό λ°μμ€κ³ , μ‘°μνκΈ° μν΄μμ΄κ³
μ΄ μμ λ€μ λ³΄ν΅ λκΈ°μ μΌλ‘ μνν μΌμ΄ λ§κΈ° λλ¬Έμ΄λ€.
λ‘κ·ΈμΈμΌλ‘ μμλ₯Ό λ€μλ©΄,
λ¨Όμ μ¬μ©μμ νλ©΄μ΄ λ©μΆμ§ μκ³ μλ²μ λ‘κ·ΈμΈ μμ²μ 보λ΄μΌ νλ€. μ΄λ° κ²½μ° λΉλκΈ° ν΅μ μ μ¨μΌ νλ€.
νλ©΄μ λ‘λ©λ°λ₯Ό κ·Έλ¦¬κ³ , κ·Έλ¬λ λμ μλ²μ λ‘κ·ΈμΈ μμ²μ 보λ΄μΌ νλκΉ..
λ§μ½ λκΈ°μ μΌλ‘ μννλ€λ©΄ νλ©΄μ΄ λ©μΆκ³ μλ²μ λ‘κ·ΈμΈ μμ²μ΄ κ°λ€.
λ μλ²μ λ‘κ·ΈμΈμ 보λμ λ μλ£λμλ€λ κ²°κ³Όκ°μ λ°κ³ λμ λ‘κ·ΈμΈ μλ£κ° λμ΄μΌ νλ€.
μ¦, κ²°κ³Όλ°μ -> λ‘κ·ΈμΈ μλ£ λ λκΈ°μ μΌλ‘ μνλμ΄μΌ νλ€.
μ΄λ λΉλκΈ° μμ μ λκΈ°μ μΌλ‘ μνν μ μλλ‘ async, await μ μ΄λ€.
μμ£Όμμ£Όμμ£Ό κ°λ¨ν μμ μ½λλ₯Ό κ°μ Έμλ€.
const getData = async() => {
const {data:result} = await axios.get("server adress");
return result;
}
νμ΄ν ν¨μ μμ async λ₯Ό λΆμ¬ λΉλκΈ° μ μΈμ νλ€.
axios λ μλ²μ λΉλκΈ°λ‘ ν΅μ νλ ν΅μ λΌμ΄λΈλ¬λ¦¬λ€. axios.get μ μΈμλ‘ μ μ μλ²μμ get μμ²μ 보λΈλ€.
μ΄ λΉλκΈ° ν΅μ μ λκΈ°μ μΌλ‘ μννκ³ μΆμΌλ μμ await λ₯Ό λΆμΈλ€.
get μμ²μ κ²°κ³Όλ ν€λμ λ°μ΄ν°λ€λ‘ ꡬμ±λμ΄ μμΌλ―λ‘, μ°λ¦¬κ° νμν λ°μ΄ν°λ§ λ½μλ΄κΈ° μν΄ κ΅¬μ‘°λΆν΄ν λΉμΌλ‘ result λ³μμ λ΄λλ€.
λ§μ½ μ΄κ²μ κ·Έλ₯ λΉλκΈ° ν΅μ μΌλ‘ μννλ€λ©΄, result μ μλ¬΄λ° κ°μ΄ μλ μνμμ 무μΈκ°κ° μ²λ¦¬λλ€.
κ·Έλ¬λ λΉλκΈ° ν΅μ μ λκΈ°μ μΌλ‘ μννκ³ μ awaitμ λΆμμΌλ, μλ²μ λ°μ΄ν°λ₯Ό λ°μμ€λ λμμλ μμ μ΄ μΌμμ€μ§λλ€.
κ·Έλ¦¬κ³ μλ²μ κ²°κ³Όλ₯Ό λ°μμ€κ³ λμμΌ Result μ κ°μ΄ λ€μ΄κ°λ€.
μμμ λ§λ getData λ₯Ό λ€λ₯Έ κ³³μμ μ¬μ©νκ³ μΆλ€λ©΄?
μ 보면... getData λ λΉλκΈ° ν¨μλ€. μλλ©΄ async λ‘ μ μΈλμμΌλκΉ.
κ·Έλ¬λ λκ°μ΄ await μΌλ‘ μ²λ¦¬ν΄μ£Όλ©΄ λλ€.
const getData = async() => {
const {data:result} = await axios.get("server adress");
return result;
}
...
<div onClick = {async() => console.log(await getData());}> </div>
μλ©΄ μ½κ³ λͺ¨λ₯΄λ©΄ μ΄λ €μ΄ λΉλκΈ° ν΅μ ...
λ¬Όλ‘ promise, axios λ₯Ό νμ©νλ λ°©λ²μ 무κΆλ¬΄μ§νλ€.
νμ§λ§ μ΄ κΈμμ λ€λ£¨λ λ²μλ₯Ό λ²μ΄λλ...λ€μμ μΈ μΌμ΄ μκΈ°λ©΄ μ μ΄λ΄μΌκ² λ€.