React: Maximum update depth exceeded 해결

증상

화면이 멈추거나 콘솔에 다음 오류가 반복 출력됩니다.

Maximum update depth exceeded. This can happen when a component repeatedly calls
setState inside componentWillUpdate or componentDidUpdate.

원인

렌더링 과정에서 상태 변경이 다시 렌더를 부르고, 그 렌더가 또 상태를 바꾸는 무한 루프입니다. 흔한 실수:

// ✕ 렌더 중에 setState 호출 → 즉시 재렌더 → 또 호출 …
function Bad() {
  const [n, setN] = useState(0);
  setN(n + 1); // 렌더 본문에서 직접 호출
  return <span>{n}</span>;
}

// ✕ onClick에 "호출 결과"를 전달 (클릭 전에 실행되어 버림)
<button onClick={setOpen(true)}>열기</button>

// ✕ 의존성 배열 없는 useEffect에서 매번 상태 변경
useEffect(() => { setCount(count + 1); }); // deps 누락 → 매 렌더마다 실행

해결

1) 이벤트 핸들러는 "함수"로 전달

<button onClick={() => setOpen(true)}>열기</button>

2) useEffect 의존성 배열을 정확히 지정

useEffect(() => {
  setCount((c) => c + 1);
}, []); // 처음 한 번만

3) 렌더 본문에서 setState 호출 금지

상태 변경은 이벤트 핸들러나 useEffect 안에서만 합니다. 이전 값 기반 갱신은 함수형 업데이트(setN(prev => prev + 1))를 사용하면 의존성 문제도 줄어듭니다.

체크리스트: ① 핸들러에 setX(...)를 직접 넣지 않았는가 ② useEffect에 deps를 빠뜨리지 않았는가 ③ 렌더 본문에서 상태를 바꾸지 않았는가.