React useEffect 무한루프 문제 완벽 해결 가이드

🔍 검색 키워드: React useEffect 무한루프, useEffect 의존성 배열, React Hook 성능 최적화, useEffect 디버깅

React useEffect 무한루프 문제 완벽 해결 가이드

증상: useEffect가 계속 실행된다

개발 중 콘솔을 보니 로그가 무한히 출력되거나 API 요청이 계속 날아가고 있나요?

useEffect: 무한 실행 상태
  console.log("Effect 실행"); // 계속 반복

이것이 useEffect 무한루프입니다. 성능 저하, 메모리 누수, API 서버 부하까지 초래하는 심각한 문제입니다.

---

원인 분석

원인 1: 의존성 배열 누락

useEffect(() => {
    console.log("매 렌더링마다 실행");
      fetchData();
      }, ); // 의존성 배열 없음 = 모든 렌더링마다 실행

---

해결 방법

✅ 방법 1: 의존성 배열 명시 (필수!)

올바른 코드:

useEffect(() => {
    fetchData();
    }, []); // 마운트 시 1회만 실행

---

결론

• 의존성 배열은 필수 — 생략하면 무한루프
• 의존성 값은 안정화 — 객체/배열은 useMemo, useCallback으로