useEffect와 비동기 호출

• useEffect 함수를 사용하면서 내부에서 비동기 호출이 필요한 경우가 있다.
• 이때, 단순히 promises 객체를 then으로 처리한다면, 별다른 문제가 없을 것이다.
• 하지만 async await 문법을 사용한다면 콘솔에 경고 메세지가 나타나는 것을 볼 수 있다.
• useEffect에 인자로 들어가는 콜백함수가 async 함수라면, promise 객체가 반환되어 처리가 되지 않는 것이다.
• 따라서, useEffect 인자로 async 함수를 사용하고자 한다면 함수 내부에서 async 함수를 선언하고 호출하는 방식을 사용한다.

    useEffect(() => {
        async function fetchData () {
            const result = await axios(`${API}/chart`);
            if(result) setUsersData(result.data);
        }
        fetchData();
    }, []);

• 위와 같이 사용할 수 있다.