useEffect Hook에서 async/await 사용하기 - React

useEffect(async () => {
  const posts = await getPosts()
  setPosts(posts);
}, []);

useEffect Hook 내부에서 위와 같이 코드를 작성하면 경고 발생

-> useEffect Hook은 clean-up 함수를 제외하고는 return하지 않음 but async 키워드로 감쌌기 때문에 Promise를 반환함

++ clean-up 함수 - 컴포넌트가 사라질 때(unmount 시점), 특정 값이 변경되기 직전(deps update 직전)에 실행할 작업을 지정할 수 있다.

<해결방법>

const first = async () => {
  const posts = await getPosts()
  setPosts(posts);
}

useEffect(() => {
  first();
}, []);

-> 비동기 함수를 외부에 정의 후 useEffect Hook 내부에서 호출! (내부에 정의해서 내부에서 호출해도 가능!)