리액트를 사용하면서 useEffect는 거의 필수적으로 사용되고 비동기 함수를 함께 사용하게 되는데요.

useEffect의 콜백함수를 async 함수로 호출하면 어떻게 되는지 살펴보려합니다.

useEffect 콜백함수를 async 함수로 사용하면 안되는 이유?

useEffect 내부에서 API 호출을 한다고 했을 때, 보통 다음과 같이 호출할 것입니다.useEffect의 첫번째 인자에는 함수 즉, 콜백함수를 할당해줍니다.

  useEffect( () => {
    
    async function fetchQuizList(){
        const res = await fetch("http://localhost:8080/api/quiz/list?field=FRONTEND&lang=JAVASCRIPT&count=10")
        const data = await res.json()
    }
    
    fetchQuizList()

  }, []);

하지만 다음과 같이 useEffect의 첫번째 콜백함수에 async 키워드를 붙여봅시다.

  async function fetchQuizList(){
    const res = await fetch("http://localhost:8080/api/quiz/list?field=FRONTEND&lang=JAVASCRIPT&count=10")
    const data = await res.json()
  }
  useEffect(async() => {

   

    await fetchQuizList()

  }, []);

경고문을 확인해보면

useEffect는 클린업 함수 이외에 어떤 것도 반환해서는 안됩니다. async 함수를 useEffect 에서 쓰고 호출하세요.

클린업 함수

클린업 함수란 컴포넌트가 unmount되거나 의존성 배열에 있는 값이 변경되면 동작하게 됩니다. 이 때, 정리해줄 부분이 있다면 코드를 작성하면 되죠.

useEffect(() => {
 console.log("effect")
    return () => {
    console.log("clean up")
    }
},[])

에러메시지가 친절히 어떤 형식으로 코드를 작성해야하는지도 보여주네요.

경고문에서는 useEffect 콜백함수가 클린업 함수 이외의 어떤 것도 반환하면 안된다고 하고 있어요.

에러메시지대로라면 fetchQuizList async 함수를 호출만 하였을 뿐, 어느것도 반환하지 않았는데 왜 에러가 발생할까요?

async 함수는 promise를 반환!

javascript에서 async 함수는 promise를 반환합니다!

async function a(){
}

  const result = a()
    console.log(result)

위 함수를 호출하고 값을 조회해보면 어떻게 나올까요?

위와 같이 Promise를 반환하고 있습니다.

아까 useEffect 콜백함수는 클린업 함수 이외에 어떤 것도 반환하면 안된다고 했었죠?
콜백함수를 async 함수로 만들어버리면 무조건 Promise를 반환하기 때문에 규칙에 위반되는 것입니다.