useEffect에서 프로미스를 반환할 수 없는 문제

[jayjeong8]

useEffect에서는 직접 이 자체를 async await을 적용할 수 없는데(프로미스를 반환하면 안되고 useEffect가 반환하기로 정해진 것만 반환해야해서)

이 안에서 async await이 적용된 함수를 실행하면 별다른 조치 없이 useEffect가 비동기를 기다리는 방식으로 진행이 되나요??

[예시]
`useEffect(() => {
const getQuotes = async () => {
await fetch("https://api.adviceslip.com/advice")
.then((response) => response.json())
.then((data) => setQuotes(data.slip.advice))
.catch((e) => console.error(e));
};

getQuotes();

}, []);`

여기서 useEffect 안의 getQuotes();는 await이 없는데 fetch에서 받아오는 값을 다 기다리고 나서 다음 코드로 넘어가는지 궁금합니다

[mdgarden]

네 제가 알기로는 말씀하신 내용이 맞아요!
여기 잘 정리되어있는 것 같아요
https://velog.io/@he0_077/useEffect-%ED%9B%85%EC%97%90%EC%84%9C-async-await-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[IGhost-P]

useEffect에서 async await를 쓰지 못하는 이유를 먼저 알아 보는게 좋아요!
useEffetct는 컴포넌트의 코드들을 모두 파악을 한뒤에 랜더링 되기 바로 직전에 실행되는 함수라서 무조건 함수를 반환해야합니다! 하지만 이때 비동기 처리가 되면 함수를 반환하는게 아니라 프로미스를 반환하게 되는 문제가 생겨 useEffect에서 사용하지 않아요!

하지만 외부에서 비동기 처리를 해놓고 useEffect애서 실행을 하면, 모든 코드가 실행된후 useEffect의 비동기 함수가 더이상 pending의 프로미스가 아닌 결과값을 나타내기 때문에 사용할수 있는 것입니다!