문제가 발생한 배경

useEffect의 첫 번째 인자인 콜백함수를 비동기 함수로 사용하니깐 에러 문구가 출력되는 상황
↪ (지금 당장 결과에 문제는 없지만 터미널 창과 콘솔 창에 에러가 발생하고 있다!)

터미널 창 eslint 경고

• 🚨 Effect callbacks are synchronous to prevent race conditions

개발자 도구 콘솔창 에러

• 🚨 must not return anything besides a function, which is used for clean-up

---

문제의 원인 알아보기

1. eslint 경고 문구를 해석해보면 useEffect의 콜백은 경쟁 상태를 방지하기 위해 동기적으로 실행됩니다. 라고 되어 있다.
↪ 비동기 작업이 포함된 useEffect 콜백에서 상태를 변경하면 여러 비동기 작업이 서로 경쟁하여 상태를 변경할 수 있기 때문에 경고 문구가 출력되었다!

경쟁 상태(Race Condition)
비동기 코드에서 발생할 수 있는 문제 중 하나로, 두 개 이상의 비동기 작업이 동시에 경쟁하여 상태를 변경할 때 예측할 수 없는 결과가 발생하는 상황을 말한다.

2. 콘솔창 에러 문구를 해석해보면 정리(Clean-Up) 외에는 어떠한 것도 반환해서는 안 됩니다.라고 되어 있다.
↪ useEffect의 콜백 함수는 Promise를 반환하면 안되는데 비동기 함수로 Promise를 반환하기 때문에 에러가 발생하였다!

---

문제 해결 방법

useEffect의 첫 번째 인자인 콜백함수를 비동기 함수로 사용하면 안되지만, useEffect 내부에서 비동기 함수를 사용하는 것은 문제가 없기 때문에 useEffect 내부에서 비동기 함수를 선언해 실행하거나, 즉시 실행 함수를 만들어서 사용하면 될 것 같다!

비동기 함수 선언해서 실행하기

useEffect(() => {
	const fetchData = async () => {
    	try{
        	const response = await fetch(url);
			if(!response.ok){
				throw new Error("API 요청 에러 발생!");
			}
			console.log("API 요청 성공!");
        }catch(err){
			console.error(err);
		}
	}
    fetchData();
}, [url])

비동기 즉시 실행 함수 사용

useEffect(() => {
	(async () => {
    	try{
        	const response = await fetch(url);
			if(!response.ok){
				throw new Error("API 요청 에러 발생!");
			}
			console.log("API 요청 성공!");
        }catch(err){
			console.error(err);
		}
	})();
}, [url])

---

+ useEffect로 비동기 함수를 실행할 때

useEffect 내부에서 비동기 함수가 생성되고 실행되는 것을 반복하므로 클린 업(Clean-Up) 함수에서 이전 비동기 함수에 대한 처리를 추가하는 것이 좋다. fetch의 경우 abortController 등으로 이전 요청을 취소하는 것이 안전하다!

useEffect(() => {
	const controller = new AbortController();

	(async () => {
    	try{
        	const result = await fetch(url, { signal: controller.signal });
			setData(await result.json())
        }catch(err){
			console.error(err);
		}
	})();

	// 클린 업(Clean-Up) 함수 작성
	return () => controller.abort();
}, [url])