[Reat] setTimeout 함수는 Promise반환X, new Promise객체 생성하기

스켈레톤 코딩을 위한 R&D 중 setTimeout함수를 이용하는 코드를 발견했다. 

비동기를 이용해서 처음 setTimeout부분이 이루어지면 다음으로 api연결이 되어 데이터를 불러오는 로직이다.

 

그러던중 왜 new Promise를 사용하는지 궁금해졌다.

  useEffect(() => {
    setIsLoading(true);

    // Intentionally delay the function execution
    new Promise(res => {
      setTimeout(() => {
        res();
      }, 3000);
    }).then(() => {
      axios.get("https://reqres.in/api/users?page=2").then(res => {
        setData(res.data.data);
        setTimeout(() => setIsLoading(false), 2000);
      });
    });
  }, []);

 

 

찾아본 결과, setTimeout( 콜백 기반의 비동기 작업) 은 그냥은 async await를 사용할 수 없기에 new Promise 를 사용해 Promise객체를 만들어주어 async, await를 사용해 비동기 작업을 할 수 있게 만들어주는 것이었다.

await는 해당 Promise가 해결될 때까지 코드의 진행을 일시 정지한다.

await는 Promise 객체가 와야 하지만, setTimeout 함수는 콜백 함수를 사용하여 비동기 작업을 처리하므로 Promise를 직접 반환하지 않습니다.
따라서 setTimeout 함수와 같은 비동기 작업을 await와 함께 사용하려면, 해당 비동기 작업을 Promise로 래핑해야 합니다. new Promise를 사용하여 Promise 객체를 생성하고, 그 안에서 setTimeout 함수를 사용하여 일정 시간이 지난 후에 Promise를 해결(resolve)하도록 할 수 있습니다. 이렇게 하면 await 키워드와 함께 사용할 수 있게 되고, await는 해당 Promise가 해결될 때까지 코드의 진행을 일시 정지합니다.

 

 

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

[setTimeout + async + await ] setTimeout은 프로미스를 반환하지 않아

 

• +이건 Promise관련 보면 좋을 내용참고
• useEffect는 함수를 반환해야 하는데 async/await은 Promise 객체를 리턴하기 때문에 사용할 수 없다.
  👉 따라서, useEffect 안에서 async/await 함수를 선언하고 그 안에 setState()를 이용해 state을 관리해야 한다.

 

React | Promise & async/await 그리고 API