useEffect에서 async await 함수 사용하기

useEffect는 비동기 코드를 직접 처리할 수 없기 때문에 async 함수를 직접 useEffect 내에서 호출하는 것은 지양되어야 합니다.

useEffect에서 async await 함수를 사용하기 위해선 아래의 예시 코드와 같이 useEffect 내부에서 비동기 작업을 처리하고 상태나 컴포넌트 업데이트 등을 통해 결과를 다루어야 합니다.

예시 코드

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('url');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};

export default MyComponent;

정리

useEffect는 항상 함수를 반환하는데 async 함수는 Promise를 반환하므로 직접 사용시 문제가 되어 async 함수는 useEffect 내부에서 처리해야합니다.