자바스크립트 async - await 리턴값 분해

asnyc - await 을 사용한 비동기 작업 처리결과 리턴값을 반환하는 과정에서 console을 찍어보니 Promise를 반환을 하여 원하던 결과값을 확인할 수 없던 문제가 있었다.

위 이유는 async - await은 비동기 처리 작업으로 리턴값으로 Promise를 반환 해준다.

import axios from 'axios';

export default async function getDetailData(id: any) {
  const { data } = await axios.get(
    'https://itunes.apple.com/us/rss/topalbums/limit=100/json'
  );

  return data.feed.entry[id];
}

getDetailData라는 함수를 만들어서 Promise를 리턴해주는 비동기 함수를 만들었다.

이 함수를 사용하기 위해서는

  useEffect(() => {
    // const promise = getDetailData(router.query.id);
    getDetailData(router.query.id).then((data) => {
      setMusic(data);
    });
  }, [router.query.id]);

이렇게 then을 사용해서 Promise를 펼쳐줘야한다. 처음에 then을 사용하지 않고 콘솔을 찍어봤떠니 Promise 리턴값을 반환 해줘서 당황했었다...