• 목록
• 게시판 리스트 옵션
  • 검색

✅ useEffect 안에서 직접 async 함수 만들면 안 되는 이유

깔끔한 비동기 패턴은 따로 있다

많이들 이렇게 쓴다:

useEffect(async () => {
  const res = await fetchData();
  setData(res);
}, []);

이 코드는 문법적으로는 가능하지만 비추천된다.
useEffect는 동기 함수여야 하며,
async 함수는 암묵적으로 Promise를 반환하기 때문에
React 내부에서 예상치 못한 동작이 발생할 수 있다.

✅ 안전한 async 패턴

useEffect(() => {
  const fetch = async () => {
    const res = await fetchData();
    setData(res);
  };
  fetch();
}, []);

• useEffect는 여전히 동기 함수

• 내부에서 비동기 로직을 명확히 분리

• 정리할 때도 안전하게 return 가능

✔️ 깔끔한 비동기 처리를 원한다면
async는 항상 useEffect 안에서 따로 정의하자.