React useEffect가 상태 변경 때문에 무한 반복 실행됨
useEffect가 실행될 때마다 의존성 값을 바꾸어 다시 실행되는 순환이 있는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- useEffect 안에서 변경한 상태가 다시 effect의 의존성으로 평가되는지 확인합니다. 의존성 배열을 삭제해 경고를 숨기지 말고, effect가 필요한 외부 동기화인지 먼저 구분해야 합니다.
- 먼저 확인할 항목
- 브라우저 네트워크 탭에서 같은 API 요청이 짧은 간격으로 반복되는지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- React
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 관련 기술
현재 증상
- 애플리케이션 오류 메시지
- 성능 저하
먼저 확인할 항목
브라우저 네트워크 탭에서 같은 API 요청이 짧은 간격으로 반복되는지 확인합니다.
effect 내부에서 setState를 호출하고 그 상태 또는 매 렌더링마다 새로 만들어지는 객체·함수가 의존성에 포함되는지 확인합니다.
React DevTools 또는 로그로 effect 실행 횟수와 의존성 값을 기록합니다.
Strict Mode에서만 두 번 보이는 개발 검증과 실제 무한 반복을 구분합니다.
피해야 할 조치
주의
- 의존성 배열을 비우거나 eslint 경고를 끄는 것으로 먼저 해결하지 않습니다.
- 반복 요청이 진행 중인 운영 환경에서 서버 rate limit을 해제하지 않습니다.
환경별 원인과 조치
이 문제가 의미하는 범위
이 문서는 effect가 실행될 때 상태를 바꾸고, 그 상태 또는 새 참조값이 의존성을 바꾸어 effect가 다시 실행되는 경우를 확인합니다. Strict Mode에서 개발 중 effect가 추가로 실행되는 현상과 실제 요청 무한 반복은 별도로 기록해야 합니다.
확인 순서
- 같은 URL 요청, 로그, 렌더링이 반복되는 간격과 횟수를 기록합니다.
- 해당 effect의 의존성 배열을 펼쳐 각 값의 이전·현재 값을 비교합니다.
- effect 안의
setState가 의존성 값을 직접 또는 간접적으로 변경하는지 확인합니다. - 함수·객체·배열을 렌더링마다 새로 만들고 의존성에 넣었는지 확인합니다.
effect가 외부 시스템과 동기화하지 않는 단순 파생값 계산이라면 렌더링 중 계산하거나 이벤트 핸들러로 옮길 수 있는지 먼저 검토합니다. 수정 후에는 네트워크 요청 횟수와 상태 변경 횟수를 다시 측정합니다.
참고 자료
useEffect | React (새 창에서 열림)
React · 공식 자료 · 확인 범위: effect가 상태를 갱신하고 그 상태가 의존성을 바꾸면 effect가 반복되는 순환이 생길 수 있습니다., React는 effect를 외부 시스템과 동기화해야 할 때 사용하고, 필요하지 않다면 effect를 제거하는 방법을 안내합니다. · 확인일: 2026-08-04