Maximum update depth exceeded 완벽 해결법 – 원인부터 예방까지

도입

React 개발 중 ‘Maximum update depth exceeded’ 에러를 마주친 적이 있나요? 이 에러는 React 컴포넌트가 무한 루프에 빠져 계속해서 리렌더링을 시도할 때 발생합니다. 특히 useState나 useEffect를 사용할 때 자주 발생하는데, 개발자들이 가장 많이 겪는 React 에러 중 하나입니다. 이 에러는 브라우저를 멈추게 하고 애플리케이션을 완전히 사용 불가능하게 만들 수 있어 신속한 해결이 필요합니다. 이 글에서는 Maximum update depth exceeded 에러의 원인부터 해결 방법, 그리고 예방법까지 완벽하게 다루어 여러분이 이 문제를 빠르게 해결할 수 있도록 돕겠습니다.

에러 상세 분석

Maximum update depth exceeded 에러는 React가 컴포넌트의 업데이트 깊이가 최대 한계를 초과했다고 판단할 때 발생합니다. React는 무한 루프를 방지하기 위해 내부적으로 업데이트 횟수를 추적하며, 이 횟수가 특정 임계값(일반적으로 50회)을 넘으면 에러를 발생시킵니다. 이 에러의 전체 메시지는 다음과 같습니다:

Error: Maximum update depth exceeded. This can happen when a component 
repeatedly calls setState inside componentWillUpdate or componentDidUpdate. 
React limits the number of nested updates to prevent infinite loops.

이 에러는 주로 렌더링 과정에서 상태가 변경되고, 그 상태 변경이 다시 렌더링을 트리거하는 악순환이 반복될 때 발생합니다. React는 이러한 상황을 감지하여 애플리케이션이 완전히 멈추기 전에 에러를 발생시켜 개발자에게 알려줍니다. 이는 React의 안전 장치이며, 성능 문제와 브라우저 크래시를 방지하는 중요한 메커니즘입니다.

발생 원인 5가지

1. 이벤트 핸들러에서 함수를 즉시 호출

가장 흔한 원인은 onClick이나 onChange 같은 이벤트 핸들러에서 함수를 참조가 아닌 즉시 호출하는 것입니다. 예를 들어 onClick={handleClick()}처럼 괄호를 붙이면 렌더링 시마다 함수가 실행되어 무한 루프가 발생합니다.

2. useEffect 의존성 배열 문제

useEffect 내부에서 상태를 업데이트하면서 그 상태를 의존성 배열에 포함시키면 무한 루프가 발생합니다. 상태가 변경되면 useEffect가 다시 실행되고, 다시 상태를 변경하는 악순환이 반복됩니다.

3. 렌더링 중 상태 업데이트

컴포넌트의 렌더링 함수 본문에서 직접 setState를 호출하면 렌더링이 상태 업데이트를 트리거하고, 상태 업데이트가 다시 렌더링을 트리거하는 무한 루프가 발생합니다.

4. Props나 State를 객체/배열로 잘못 비교

useEffect나 useMemo의 의존성 배열에 객체나 배열을 직접 넣으면, 참조 비교로 인해 매번 새로운 것으로 인식되어 무한 루프가 발생할 수 있습니다.

5. 부모-자식 컴포넌트 간 상태 전달 오류

부모 컴포넌트에서 자식 컴포넌트로 상태 업데이트 함수를 전달하고, 자식이 렌더링 중에 이를 호출하면 부모가 리렌더링되고 자식도 리렌더링되는 무한 순환이 발생합니다.

해결방법 7가지

해결법 1: 이벤트 핸들러 올바르게 작성

함수를 즉시 호출하지 않고 참조만 전달하세요:

// 잘못된 예시 ❌
증가

// 올바른 예시 ✅
 setCount(count + 1)}>증가
// 또는
증가

해결법 2: useEffect 의존성 배열 수정

상태를 업데이트할 때 함수형 업데이트를 사용하여 의존성 배열에서 제거하세요:

// 잘못된 예시 ❌
useEffect(() => {
  setCount(count + 1);
}, [count]);

// 올바른 예시 ✅
useEffect(() => {
  setCount(prevCount => prevCount + 1);
}, []); // count를 의존성에서 제거

해결법 3: 렌더링 중 상태 업데이트 방지

렌더링 본문에서 직접 setState를 호출하지 말고 useEffect나 이벤트 핸들러 내부에서만 호출하세요:

// 잘못된 예시 ❌
function Component() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // 렌더링 중 호출
  return 
{count}
;
}

// 올바른 예시 ✅
function Component() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(1);
  }, []);
  
  return 
{count}
;
}

해결법 4: 객체/배열 의존성 메모이제이션

useMemo나 useCallback을 사용하여 객체나 배열의 참조를 안정화시키세요:

// 잘못된 예시 ❌
const options = { key: 'value' };
useEffect(() => {
  fetchData(options);
}, [options]); // 매번 새로운 객체로 인식

// 올바른 예시 ✅
const options = useMemo(() => ({ key: 'value' }), []);
useEffect(() => {
  fetchData(options);
}, [options]);

해결법 5: useRef로 무한 루프 방지

특정 로직을 한 번만 실행해야 할 때 useRef를 활용하세요:

function Component() {
  const [data, setData] = useState(null);
  const initialized = useRef(false);
  
  useEffect(() => {
    if (!initialized.current) {
      initialized.current = true;
      fetchData().then(setData);
    }
  }, [data]); // data가 변경되어도 한 번만 실행
  
  return 
{data}
;
}

해결법 6: 조건부 상태 업데이트

상태를 업데이트하기 전에 현재 값과 비교하여 필요할 때만 업데이트하세요:

useEffect(() => {
  const newValue = computeValue();
  if (newValue !== currentValue) {
    setValue(newValue);
  }
}, [currentValue]);

해결법 7: React.memo와 useCallback 활용

불필요한 리렌더링을 방지하여 업데이트 체인을 끊으세요:

const ChildComponent = React.memo(({ onClick }) => {
  return 클릭;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);
  
  return ;
}

예방법과 베스트 프랙티스

1. 상태 업데이트는 이벤트 핸들러나 useEffect 내부에서만: 렌더링 함수 본문에서 직접 setState를 호출하지 마세요.

2. useEffect 의존성 배열 신중하게 관리: ESLint의 exhaustive-deps 규칙을 활성화하여 의존성 배열을 올바르게 관리하세요.

3. 함수형 업데이트 패턴 사용: 이전 상태를 기반으로 업데이트할 때는 항상 함수형 업데이트(prevState => newState)를 사용하세요.

4. 메모이제이션 적절히 활용: useMemo, useCallback, React.memo를 사용하여 불필요한 리렌더링을 방지하세요.

5. 디버깅 도구 활용: React DevTools의 Profiler를 사용하여 리렌더링 패턴을 모니터링하고 문제를 조기에 발견하세요.

6. 코드 리뷰와 테스트: 상태 관리 로직이 포함된 코드는 특히 주의 깊게 리뷰하고, 통합 테스트를 통해 무한 루프를 사전에 방지하세요.

마무리

Maximum update depth exceeded 에러는 처음에는 당황스러울 수 있지만, 원인을 이해하면 쉽게 해결할 수 있습니다. 대부분의 경우 이벤트 핸들러를 잘못 작성하거나 useEffect의 의존성 배열을 잘못 관리해서 발생합니다. 이 글에서 소개한 7가지 해결법과 예방법을 활용하면 이 에러를 빠르게 해결하고 앞으로 발생하지 않도록 예방할 수 있습니다. React의 상태 관리 원칙을 이해하고 베스트 프랙티스를 따르면 더 안정적이고 성능이 좋은 애플리케이션을 만들 수 있습니다. 개발하면서 이 에러를 마주치면 당황하지 말고, 이 가이드를 참고하여 체계적으로 문제를 해결해 보세요.