[React] async await

*찾게 된 이유

외부 스크립트 호출 하여 해당 파일에 있는 변수를 사용하고자 했는데,

호출하는 함수가 미처 끝나기 전에 변수를 읽어오는 함수가 시작되어 undefined가 뜨면서 error 발생.

호출하는 함수를 다 끝내고 변수를 읽어오기 위해 찾게 된 방법이다.

 

 

---

사용방법1.

const sampleFunc = async () => {
    const result = await asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다
    console.log(result)
}

 

사용방법2.

async function sampleFunc() {
	const result = await asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다
    	console.log(result)
}

 

 

 

왜 await만 쓰지 않고, async를 같이 사용해야 할까?

 

async를 붙여서 함수를 정의하면 실제로는 Promise 함수로 만들어진다.

그래서 그 함수를 async가 아닌 다른 함수에서 await없이 호출하는 경우 리턴값을 받으려면

.then()으로 호출해야 한다.

즉, async라고 붙이는 것은 그 함수가 Promise 타입으로 만들어져야 한다는 것을 명시하는 행위이기도 하다.

 

 

다른 의미로

async 붙은 함수(함수A)를 async가 아닌 다른 함수에서 호출하고 그 직후 다른 동작을 수행하게 되면

함수A  동작이 완료되기 전에 다른 동작이 동시에 수행하게 된다.

 

 

---

 

참고사이트

 

https://one-it.tistory.com/entry/Promise-%EC%A0%95%EB%A6%AC-asyncawait-%EC%82%AC%EC%9A%A9%EB%B2%95-then%EA%B3%BC%EC%9D%98-%EC%B0%A8%EC%9D%B4

Promise 정리: async/await 사용법 & then과의 차이

 

https://okky.kr/articles/1062046

OKKY - All That Developer