[react] fetch와 async-await

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 !

아직 정리 중인 개념입니다

 

1. async/await이란?

async는 비동기라는 의미로 async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다

 

useEffect(() => {

(async () => {

const res = await fetch(

`api 주소`

);

const data = await res.json();

})();

}, []);

 

함수안에 비동기적으로 실행 될 부분은 await 붙어 있는 코드입니다.

await은 무엇으로 부터 기다리다라는 뜻을 가지고 있습니다.
await은 그 뒤에코드를 실행하고, 그코드가 리턴하는 객체를 기다려 줍니다.

그리고 객체가 fullfiield 상태가 되면 그 작업 성공 결과를 추출해서 리턴합니다

 

아래 await은 fetch함수에서 리턴하는 객체가 fullfield상태가 될때까지 기다립니다
fullfield상태가 되면 작업성공 결과인 response객체를 추출해서 리턴합니다

그럼 response의 실제 내용이 result에 담김니다

 

2. 개념 정리

await은 뒤에 있는 코드를 실행하고, 그것이 리턴하는 Promise객체가 fullfield상태가 될때까지 기다립니다. 그리고 해당 Promise객체가 fullfield상태가 되면 그 작업성공 결과를 추출해서 리턴합니다

async가 붙어 있는 함수 안에 비동기 실행이 되는 부분이 있다라는 뜻은 함수의 코드 중에서 Promise객체를 리턴하는 코드가 있다라는 뜻 입니다. 그리고 그 앞에는 await를 붙여서 Promise객체가 fullfield상태가 될때까지 기다려주는것 입니다. 그리고 fullfield상태가 되고, 그 작업 성공 결과을 리턴하는 후에야 그 다음줄을 실행하게 됩니다

 

  

 

Resources

https://triplexlab.tistory.com/208