[React.js] useEffect와 async/await 함께 사용하기

❗ useEffect와 async/await 함께 사용하기

React 초기에 useEffect hook 내에서 async / await를 당연하게 함수와 변수에 사용하는것 처럼 하려는데

안되어서 useEffect에는 아직 async / await 사용이 불가능한가? 싶어서 검색을 이래저래 한 기억이 있어 내 블로그에서 포스팅하려한다.

물론 글은 짧다

---

❌

useEffect(async () => {
const data = await getdata();
setUser(data);
}, []);

사용할 수 없는 이유는 다음과 같다.

useEffect는 콜백 함수가 아무것도 반환하지 않거나 cleanup function을 반환 해야할것으로 정의되어있는데
콜백 함수 내에서 async/await 구문을 직접 사용하면 자동으로 함수를 비동기 함수로 전환하고 

Promise를 반환하기 때문에 useEffect hook의 동작과 충돌하고 예기치 않은 문제가 발생할 수 있기 때문이다.

 

⭕

useEffect(() => {
  const fetchData = async () => {
    const data = await getdata();
    setUser(data);
  };
  fetchData();
}, []);

useEffect 후크 내에서 async/await 구문이 작동하도록 하려면 내부에 별도의 함수를 정의하고 즉시 호출하는 방법으로 사용해야한다.

 

번외로

useEffect(() => {
  getdata().then((data) => {
    setUser(data);
  });
}, []);

then을 사용해서 그냥 이렇게 하는것도 때로는 더 좋은 방법이 될 수도 있다.

 

끝