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

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

• useEffect 내에서 비동기 처리를 해주려고 async/await을 사용하려고 했는데 오류가 발생했다.
• Effect callbacks are synchronous to prevent race conditions. Put the async function inside: ..

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

 

useEffect(() => {
  async function fetchData() {
    const respons = await fetch("http://localhost:3333/topics/" + id);
    const result = await respons.json();
    console.log(result);
    setTitle(result.title);
    setBody(result.body);
  }
  fetchData();
}, []);

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

 

async function fetchData() {
  const respons = await fetch("http://localhost:3333/topics/" + id);
  const result = await respons.json();
  console.log(result);
  setTitle(result.title);
  setBody(result.body);
}
 
useEffect(() => {
  fetchData();
}, []);

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

 

📌 참고

• [react] useEffect 훅에서 async await 함수 사용하기
• [React]useEffect Hook에서 async await를 사용하여 API 호출