[✏️ Error-Handling] useEffect 관련 에러

[ajrfyd]

어떤 에러인가요?

• useEffect 관련 에러

에러 메시지

Warning: An effect function must not return anything besides a function, which is used for clean-up.%s%s, 
It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:
useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

에러 핸들링 방법

useEffect 함수 안에서 비동기 함수를 생성 하지 말고 함수 스코프 밖에서 비동기 함수를 정의해 준 뒤

useEffec 함수 안에서는 호출만 해줬다.

// 원래 코드
useEffect(async () => {
      await Font.loadAsync({
        "UhBeeJJIBBABBA": require('../../../assets/fonts/UhBeeJJIBBABBA.ttf'),
        "UhBeeJJIBBABBABold": require('../../../assets/fonts/UhBeeJJIBBABBABold.ttf'),
      });
      setIsReady(true);
    }, []);

// 수정된 코드
const reqFont = async() => {
    return await Font.loadAsync({
      "UhBeeJJIBBABBA": require('../../../assets/fonts/UhBeeJJIBBABBA.ttf'),
      "UhBeeJJIBBABBABold": require('../../../assets/fonts/UhBeeJJIBBABBABold.ttf'),
    });
  }

  useEffect(() => {
      reqFont()
      setIsReady(true);
    }, []);