useEffect에서 async/await 사용하는 방법

useEffect 내에서 비동기 처리를 해주려고 async/await을 사용하려고 했는데 오류가 발생했다.

Effect callbacks are synchronous to prevent race conditions. Put the async function inside: ..

useEffect는 아무것도 반환하지 않거나 clean up 함수를 반환해야 한다.

따라서 useEffect 내에서 async/await를 사용하고 싶다면 함수로 만들어서 사용하면 된다.

useEffect(() => {
  async function fetchData() {
    const respons = await fetch("api링크");
    const result = await respons.json();
    console.log(result);
    setX(result.data.info5);
  }
  fetchData();
}, []);

  async function fetchData() {
     const respons = await fetch("api링크");
     const result = await respons.json();
     console.log(result);
     setX(result.data.info5);
     console.log(x);
   }

   useEffect(() => {
     fetchData();
   }, []);

이렇게 함수 밖으로 빼고 useEffect 내에서 호출해도 된다.