useEffect 내에서 async await

useEffect 내에서 비동기 적으로 api 호출을 하다 useEffect 내에서 바로 async와 await을 호출을 권장하지 않는다 하여

정리하게 되었다

 

다음과 같이 useEffet 내에서 async와 await을 사용하면 에러가 발생한다.

 Argument of type '() => Promise <void>' is not assignable to parameter of type 'EffectCallback'.
  Type 'Promise <void>' is not assignable to type 'void | Destructor'.

즉 React에서의 useEffect 사용권장 방식은 void를 반환하도록, return 값이 없도록? 구현해야 하는 것 같았다.

다른 블로그에서는 useEffect Hook은 아무것도 반환하지 않거나 Clean up 함수를 해야 한다고 한다!

useEffect 내에서 async를 사용하게 되면 컴포넌트가 마운트 된 직후에 데이터 요청이 완료되지 않았을 수 있으므로 예측

가능한 방식으로 동작하지 않을 수 있기 때문이다

리액트에서의 useEffect에 관련사항은 자세히 찾지 못했지만 생각해 보면 간단한 문제인 것 같았다? 결국 asnyc를 부여해서 promiser값을 return 하도록 하면 useEffect가 하는 일에 방향성과 다른 일을 하게 되므로 예측 불가능하게 되는 느낌이다?

 

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useeffect

Hooks API Reference – React

참고 블로그:
https://developer-talk.tistory.com/250