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

React 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는 내부적으로 약 50번의 중첩된 업데이트를 허용하며, 이를 초과하면 무한 루프로 간주합니다.

에러가 발생하면 애플리케이션이 멈추고 화면이 응답하지 않게 됩니다. 브라우저 콘솔에는 빨간색 에러 메시지와 함께 스택 트레이스가 표시됩니다. 주로 state 업데이트 로직에 문제가 있을 때 발생하며, 특히 useEffect, useState, 이벤트 핸들러에서 잘못된 패턴을 사용했을 때 나타납니다. 개발 환경에서는 즉시 감지되지만, 프로덕션에서는 사용자 경험을 심각하게 해칠 수 있어 반드시 해결해야 합니다.

발생 원인 5가지

1. 이벤트 핸들러 즉시 실행

가장 흔한 원인은 onClick 등의 이벤트 핸들러에서 함수를 즉시 실행하는 것입니다. 함수 참조 대신 함수 호출 결과를 전달하면 렌더링할 때마다 함수가 실행되어 무한 루프가 발생합니다.

2. useEffect 의존성 배열 오류

useEffect 내부에서 state를 업데이트하면서 해당 state를 의존성 배열에 포함시키면, state 변경 → useEffect 실행 → state 변경의 무한 루프가 만들어집니다.

3. render 메서드 내 state 업데이트

클래스 컴포넌트의 render 메서드나 함수형 컴포넌트의 본문에서 직접 setState를 호출하면 렌더링 → state 업데이트 → 렌더링의 순환이 발생합니다.

4. componentDidUpdate 내 무조건 state 변경

componentDidUpdate 라이프사이클 메서드에서 조건문 없이 setState를 호출하면 업데이트가 끝없이 반복됩니다.

5. 객체/배열 참조 문제

의존성 배열에 매번 새로 생성되는 객체나 배열을 넣으면, 참조가 계속 바뀌어 useEffect가 반복 실행됩니다.

해결방법 7가지

해결방법 1: 이벤트 핸들러 올바르게 전달

잘못된 코드:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    
      Count: {count}
    
  );
}

올바른 코드:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
     setCount(count + 1)}>
      Count: {count}
    
  );
}

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

잘못된 코드:

function DataFetcher() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchData().then(result => setData(result));
  }, [data]); // data가 변경될 때마다 실행
  
  return 
{data.length}
;
}

올바른 코드:

function DataFetcher() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchData().then(result => setData(result));
  }, []); // 마운트 시에만 실행
  
  return 
{data.length}
;
}

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

잘못된 코드:

function BadComponent() {
  const [count, setCount] = useState(0);
  
  setCount(count + 1); // 렌더링 중 호출
  
  return 
{count}
;
}

올바른 코드:

function GoodComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1);
  }, []); // useEffect 내부로 이동
  
  return 
{count}
;
}

해결방법 4: componentDidUpdate에 조건 추가

잘못된 코드:

class MyComponent extends React.Component {
  componentDidUpdate() {
    this.setState({ updated: true });
  }
}

올바른 코드:

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      this.setState({ updated: true });
    }
  }
}

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

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const search = useCallback(() => {
    performSearch(query).then(setResults);
  }, [query]);
  
  useEffect(() => {
    search();
  }, [search]);
  
  return 
{results.length} results
;
}

해결방법 6: useMemo로 객체 참조 안정화

function FilteredList({ items }) {
  const [filtered, setFiltered] = useState([]);
  
  const filterOptions = useMemo(() => ({
    minPrice: 10,
    maxPrice: 100
  }), []);
  
  useEffect(() => {
    const result = items.filter(item => 
      item.price >= filterOptions.minPrice &&
      item.price <= filterOptions.maxPrice
    );
    setFiltered(result);
  }, [items, filterOptions]);
  
  return 
{filtered.length} items
;
}

해결방법 7: 함수형 업데이트 사용

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1); // 이전 값 기반 업데이트
    }, 1000);
    
    return () => clearInterval(timer);
  }, []); // count를 의존성에서 제거 가능
  
  return 
{count}
;
}

예방법과 베스트 프랙티스

Maximum update depth exceeded 에러를 예방하려면 몇 가지 규칙을 따라야 합니다. 첫째, 이벤트 핸들러는 항상 함수 참조나 화살표 함수로 전달하세요. 둘째, useEffect의 의존성 배열을 신중하게 관리하고, ESLint의 exhaustive-deps 규칙을 활성화하세요. 셋째, 렌더링 단계에서는 절대 state를 변경하지 마세요.

넷째, useCallback과 useMemo를 적절히 활용하여 불필요한 재생성을 방지하세요. 다섯째, React DevTools의 Profiler를 사용하여 리렌더링 패턴을 분석하고 문제를 조기에 발견하세요. 마지막으로, state 업데이트가 필요한 경우 항상 조건문으로 무한 루프를 방지하세요.

마무리

React의 Maximum update depth exceeded 에러는 처음에는 어렵게 느껴지지만, 원인을 이해하면 쉽게 해결할 수 있습니다. 대부분 이벤트 핸들러의 잘못된 사용, useEffect 의존성 배열 문제, 또는 렌더링 중 state 업데이트가 원인입니다. 이 글에서 제시한 7가지 해결방법을 적용하면 에러를 빠르게 수정할 수 있습니다. 무엇보다 중요한 것은 예방입니다. 베스트 프랙티스를 따르고 코드 리뷰를 통해 이러한 패턴을 조기에 발견하세요. 이제 자신 있게 React 개발을 계속하세요!