[REACT] async, await

학습일 : 2023. 04. 06

---

 

fetch(`URL`) 로 데이터를 fetch 할 때

긴 코드를 한줄로 정리해보고자 한다.

 

컴포넌트가 생성될 때 한번만 실행할 것이므로

useEffect 안에 작성해줄 것이다.

 

예시

await는 async 함수 안에서만 동작하는데

async 안에 await을 두번 써주어 (캡슐화)

아래와 같은 방식으로 작성해주면 깔끔하게 코드가 한줄로 정리된다.

  useEffect(() => {
    (async () => {
      // infoData 받아오기
      const infoData = await
      (await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)).json();

      // 가격정보 데이터 받아오기
      const priceData = await (
        await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
      ).json();

      // setInfo, setPriceInfo
      setInfo(infoData); // infoData로 set
      setPriceInfo(priceData); // priceData로 set
    })();
  }, []);