useEffect 콜백 함수에 비동기 함수를 넣으면 안되는 이유가 뭘까 ?

[yunseorim1116]

답: useEffect의 콜백 함수에 비동기 함수를 직접 넣으면 안 되는 이유는 useEffect가 동기적 처리를 기대하기 때문입니다.

1. 비동기 함수와 상태 업데이트의 시점 불일치: useEffect의 콜백 함수는 동기적으로 실행됩니다. 그러나 비동기 함수는 콜백 함수의 실행이 완료된 후에 실행되므로, useEffect가 실행된 후 상태가 변경되거나 여러 비동기 작업이 동시에 진행될 수 있습니다. 이로 인해 상태 업데이트가 중첩되거나 예상하지 못한 순서로 진행될 수 있습니다.
   1. 비동기 함수 실행시점 : 콜백함수 완료 시점
   2. useEffect의 함수는 동기 함수이기 때문에 동기적으로 실행
2. clean-up함수와 상태 업데이트: useEffect는 clean-up 함수를 반환할 수 있습니다. 이 clean-up함수 는 컴포넌트가 언마운트되거나 useEffect가 다시 실행될 때 호출됩니다. 비동기 작업이 완료되기 전에 컴포넌트가 언마운트되면, 이 비동기 작업이 완료된 후 상태를 업데이트하려고 할 때, 이미 언마운트된 컴포넌트에서 상태를 변경하려는 문제가 발생할 수 있습니다. 이로 인해 오류가 발생하거나 예기치 않은 동작이 일어날 수 있습니다.
3. 경쟁 상태 발생: 여러 비동기 작업이 동시에 진행될 때, 이러한 작업들 간에 상태 업데이트가 중첩되거나 순서가 어긋날 수 있습니다. 예를 들어, 네트워크 요청 두 개가 동시에 진행되었고, 이 요청들이 서로 다른 데이터로 상태를 데이트하려 할 때, 최종적으로 어떤 데이터가 상태에 반영될지는 예측하기 어려울 수 있습니다. 이로 인해 경쟁 상태가 발생할 수 있습니다.

이러한 문제를 해결하기 위해 비동기 함수를 useEffect 내에서 직접 호출하기보다는, 비동기 함수를 내부에서 정의하여 호출하고, 비동기 작업의 상태를 추적하며 필요할 때 정리 함수를 사용하는 것이 좋습니다.

예를 들어:

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      if (isMounted) {
        setData(data);
      }
    } catch (error) {
      // Handle error
    }
  };

  fetchData();

  return () => {
    isMounted = false;
  };
}, []);

이 예제에서는 isMounted 플래그를 사용하여 컴포넌트가 여전히 마운트된 상태인지 확인하고, 비동기 작업이 완료된 후 상태를 업데이트할 때 컴포넌트가 언마운트된 경우를 방지합니다.

---

사담:
안되는건 알았는데...........
"왜" 가 궁금했다.
결론 = useEffect 의 콜백 함수는 동기적으로 동작하기 떄문! 탕탕~