useEffect를 async와 함께 사용할 때 유의할 점

🐕 useEffect안의 콜백함수는 항상 함수를 반환해야한다.

하지만 async 함수는 프로미스를 반환하기 때문에

useEffect(async () => {})

이와 같은 형식으로 작성하는 경우

useEffect는 반환문으로 함수를 반환해야하지만

프로미스를 반환하게 되어 오류를 만나게 될 가능성이 높아집니다.

---

👻그럼 async는 어떻게 씀

 useEffect(() => {
    const process = async () => {
      setLoading(true);
      try {
        const resolved = await promiseCreator();
        setResolved(resolved);
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };
    process();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }

이런식으로 useEffect의 매개변수로 들어갈 콜백함수 내부에서

async 함수를 정의해주고 async 함수를 호출해주면 됩니다.

거기에 try catch문까지 곁들여 사용하면 더 좋겠죵

---

이해했다고 생각할 때가 가장 무서울 때다.