[React] useEffect must not return anything besides a function, which is used for clean-up.....

기능 구현중에 useEffect안에서 async - await 함수를 써야하는 경우가 생겼다. 

아무생각없이 

useEffect( async() => {
  const sampleFunction = await() => {
  ...
  }
}, [])

처럼 쓰려고 했더니 아래처럼 useEffect must not return anything besides a function.. 어쩌구 오류가 났다.

 

 

 

해석해보니 useEffect 안에서 비동기 함수를 작성하는 법을 알려주고 있었다. 위 오류에서 안내해주는 설명서에 따라서 코드를 고쳤다.

 

 

useEffect( () => {
  const fetchData = async () => {
    const sampleFunction = await() => {
    ...
    }
  }
  
  fetchData()
}, [])

아래처럼 고쳐서 사용하니 오류가 사라졌다. 리액트 훅 라이프사이클이랑 useEffect 구조를 조금 더 알아봐야겠다.