[React][Instagram] setTimeout과 async/await 함께 사용하기

useEffect 내부에서 feed 데이터를 fetch한뒤 브라우저에 표시하기 위해 aync, await로 비동기 처리를 해주었다.

문제는, 여기서 setTimeout 함수를 같이 써주려고 할 때였다.

await과 setTimeout 함수는 같이 사용할 수 없다.

setTimeout은 Promise 반환을 하지 않기 때문에 async와 await을 적용해도 동기적으로 적용되지 않는다.

따라서 Promise를 반환하도록 직접 작성 후 async와 await을 적용해야 한다.

  useEffect(async () => {
    setIsLoading(true);
    await fetchTimeDelay(1000);
    await fetchFeedData(page);
    setIsLoading(false);
  }, [page]);

  const fetchTimeDelay = time =>
    new Promise(resolve => setTimeout(resolve, time));

  async function fetchFeedData(page) {
    const newFeeds = await (await fetch(`data/Gy/feed${page}.json`)).json();
    setFeedList(prevFeeds => [...prevFeeds, ...newFeeds]);
  }

Reference

• https://footprint-of-nawin.tistory.com/97