화면이 계속 깜빡이거나 무한 로딩될 때 (무한 렌더링)
이런 증상이라면
페이지가 계속 깜빡이거나, 네트워크 탭에 같은 요청이 끝없이 쌓이거나, 탭이 느려지다 멈춥니다. 콘솔에 "Maximum update depth exceeded"가 뜨기도 합니다.
흔한 원인 (가능성 순)
1useEffect 안에서 상태를 바꾸는데 그 상태가 의존성에 있다코드
useEffect가 setState를 부르고, 그 state가 의존성 배열([state])에 있으면 → 상태 변경 → 이펙트 재실행 → 다시 상태 변경 → 무한 반복이 됩니다.
2의존성에 매번 새로 만들어지는 객체/함수가 들어감코드
렌더마다 새로 생성되는 객체·배열·함수를 의존성에 넣으면, 값은 같아도 "매번 다른 것"으로 인식돼 이펙트가 끝없이 다시 돕니다.
3렌더 중에 직접 setState 호출코드
컴포넌트 본문(렌더 도중)에서 조건 없이 setState를 부르면 즉시 재렌더가 걸려 루프가 됩니다.
확인·해결 순서
- 콘솔의 "Maximum update depth" 경고가 가리키는 컴포넌트부터 확인
- useEffect의 의존성 배열에서 매 렌더 새로 만들어지는 객체·함수를 찾아 useMemo/useCallback로 고정하거나 배열에서 뺀다
- 이펙트가 정말 한 번만 실행돼야 하면 의존성 배열을 []로, 특정 값이 바뀔 때만이면 그 원시값(id 등)만 넣는다
- API 호출이 무한이면 네트워크 탭에서 어떤 요청이 반복되는지 확인해 그 호출을 부르는 이펙트를 좁힌다
자주 묻는 질문
의존성 배열을 그냥 비우면 안 되나요?
경고는 사라지지만, 필요한 값이 바뀌어도 이펙트가 안 도는 새 버그가 생길 수 있습니다. "이 이펙트가 언제 다시 돌아야 하는가"를 기준으로 넣을 값을 정하는 게 맞습니다.
AI가 준 코드인데 왜 이래요?
AI는 동작하는 코드를 잘 만들지만, 렌더/이펙트 타이밍처럼 "실행 순서" 문제는 자주 놓칩니다. 눈에 안 보이는 흐름이라 증상만 보고는 AI도 못 잡는 대표 케이스입니다.
위를 다 해봤는데도, 또는 AI(Cursor·Claude)한테 물어봐도 계속 같은 에러라면 — 에러 로그를 붙여넣으면 60초 안에 진짜 원인을 짚어드려요.
이 문제 무료로 AI 진단받기