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

도입 – Maximum update depth exceeded 에러란?

React 개발을 하다 보면 ‘Maximum update depth exceeded’ 에러를 마주하게 되는 경우가 있습니다. 이 에러는 컴포넌트가 무한 루프에 빠져 계속해서 리렌더링을 시도할 때 발생합니다. React는 성능 보호를 위해 업데이트 깊이에 제한을 두고 있으며, 이 제한을 초과하면 애플리케이션이 중단됩니다. 특히 초보 개발자들이 자주 겪는 이 문제는 코드의 특정 패턴에서 반복적으로 나타나며, 한 번 이해하면 쉽게 예방할 수 있습니다. 이 글에서는 에러의 원인부터 구체적인 해결 방법, 그리고 예방법까지 상세히 다루어 여러분이 이 문제를 완벽하게 해결할 수 있도록 도와드리겠습니다.

에러 상세 분석

Maximum update depth exceeded 에러의 전체 메시지는 다음과 같습니다: “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는 내부적으로 업데이트 깊이를 추적하며, 일정 횟수(일반적으로 50회) 이상의 중첩된 업데이트가 발생하면 안전장치로 에러를 던집니다. 이는 브라우저가 멈추거나 메모리가 소진되는 것을 방지하기 위한 React의 보호 메커니즘입니다. 주로 setState, useState의 setter 함수, 또는 useEffect 훅에서 잘못된 의존성 배열 설정으로 인해 발생하며, 렌더링 중에 상태를 변경하는 코드가 주요 원인입니다.

발생 원인 5가지

1. 렌더링 중 직접적인 setState 호출

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

2. 이벤트 핸들러의 잘못된 작성

onClick이나 onChange 같은 이벤트 핸들러에 함수를 할당할 때 함수를 즉시 실행하는 형태로 작성하면, 렌더링 시마다 함수가 실행되어 상태가 변경됩니다.

3. useEffect의 잘못된 의존성 배열

useEffect 내부에서 상태를 변경하면서 해당 상태를 의존성 배열에 포함시키면, 상태 변경이 useEffect를 다시 실행하고 이것이 반복됩니다.

4. componentDidUpdate의 무조건적 setState

클래스 컴포넌트에서 componentDidUpdate 내부에 조건문 없이 setState를 호출하면, 업데이트가 또 다른 업데이트를 무한히 트리거합니다.

5. 파생 상태의 잘못된 관리

props로부터 파생된 상태를 관리할 때, 렌더링마다 props와 state를 비교하여 setState를 호출하는 패턴은 예상치 못한 무한 루프를 만들 수 있습니다.

해결방법 7가지 (코드 포함)

해결법 1: 이벤트 핸들러를 함수 참조로 전달

// 잘못된 예 - 렌더링 시 함수 즉시 실행
function BadComponent() {
  const [count, setCount] = useState(0);
  return 클릭;
}

// 올바른 예 - 함수 참조 전달
function GoodComponent() {
  const [count, setCount] = useState(0);
  return  setCount(count + 1)}>클릭;
}

해결법 2: useEffect 의존성 배열 올바르게 설정

// 잘못된 예
function BadComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setData([...data, 'new item']);
  }, [data]); // data가 변경되면 useEffect 재실행
  
  return 
{data.length}
;
}

// 올바른 예 - 함수형 업데이트 사용
function GoodComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setData(prev => [...prev, 'new item']);
  }, []); // 빈 배열로 한 번만 실행
  
  return 
{data.length}
;
}

해결법 3: 렌더링 중 setState 제거

// 잘못된 예
function BadComponent({ user }) {
  const [name, setName] = useState('');
  
  if (user.name !== name) {
    setName(user.name); // 렌더링 중 setState 호출
  }
  
  return 
{name}
;
}

// 올바른 예 - useEffect 사용
function GoodComponent({ user }) {
  const [name, setName] = useState('');
  
  useEffect(() => {
    setName(user.name);
  }, [user.name]);
  
  return 
{name}
;
}

해결법 4: componentDidUpdate에 조건 추가

// 잘못된 예
class BadComponent extends React.Component {
  componentDidUpdate() {
    this.setState({ updated: true }); // 무조건 실행
  }
}

// 올바른 예
class GoodComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({ updated: true }); // 조건부 실행
    }
  }
}

해결법 5: useMemo로 계산 값 캐싱

// 개선된 예 - 불필요한 재계산 방지
function OptimizedComponent({ items }) {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);
  
  return 
Total: {total}
;
}

해결법 6: useCallback으로 함수 메모이제이션

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 함수를 메모이제이션하여 재생성 방지
  
  return ;
}

해결법 7: 파생 상태 대신 계산 사용

// 잘못된 예 - 파생 상태 사용
function BadComponent({ price }) {
  const [tax, setTax] = useState(0);
  
  useEffect(() => {
    setTax(price * 0.1);
  }, [price]);
  
  return 
{tax}
;
}

// 올바른 예 - 직접 계산
function GoodComponent({ price }) {
  const tax = price * 0.1; // 상태 없이 계산
  return 
{tax}
;
}

예방법과 베스트 프랙티스

Maximum update depth exceeded 에러를 예방하기 위해서는 몇 가지 원칙을 따라야 합니다. 첫째, 렌더링 함수는 순수 함수로 유지하고 부수 효과는 useEffect나 이벤트 핸들러에서만 처리하세요. 둘째, useEffect의 의존성 배열을 정확하게 작성하고, ESLint의 exhaustive-deps 규칙을 활성화하여 경고를 받으세요. 셋째, 파생 상태보다는 직접 계산을 선호하며, 성능이 중요한 경우에만 useMemo를 사용하세요. 넷째, 이벤트 핸들러에는 항상 함수 참조를 전달하고, 즉시 실행 형태는 피하세요. 다섯째, React DevTools의 Profiler를 활용하여 불필요한 리렌더링을 모니터링하고 최적화하세요. 이러한 베스트 프랙티스를 따르면 대부분의 무한 루프 문제를 사전에 방지할 수 있습니다.

마무리

Maximum update depth exceeded 에러는 React 개발 과정에서 흔히 마주치는 문제지만, 원인을 이해하고 올바른 패턴을 적용하면 쉽게 해결할 수 있습니다. 이 글에서 소개한 7가지 해결 방법과 예방법을 숙지하고 적용한다면, 더 이상 이 에러로 고민하지 않을 것입니다. 코드를 작성할 때 항상 상태 업데이트의 흐름을 생각하고, 무한 루프가 발생할 가능성을 미리 점검하는 습관을 들이세요. 이러한 디버깅 경험은 여러분을 더 나은 React 개발자로 성장시킬 것입니다.