Blog

React Maximum update depth exceeded 에러란?

React 개발 중 Maximum update depth exceeded 에러를 마주친 적이 있나요? 이 에러는 React 컴포넌트가 무한 루프에 빠져 계속해서 리렌더링을 시도할 때 발생합니다. React는 성능 보호를 위해 업데이트 깊이에 제한을 두고 있으며, 이 한계를 초과하면 애플리케이션을 중단시킵니다. 일반적으로 useState, useEffect 훅이나 이벤트 핸들러에서 잘못된 상태 업데이트 로직으로 인해 발생하며, 초보 개발자뿐만 아니라 경험 많은 개발자도 자주 겪는 문제입니다. 이 글에서는 이 에러의 원인을 깊이 분석하고, 실전에서 바로 적용할 수 있는 해결 방법을 상세히 알아보겠습니다.

에러 상세 분석

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번의 중첩된 업데이트를 허용하며, 이를 초과하면 에러를 발생시킵니다. 이 에러는 주로 개발 환경에서 감지되지만, 프로덕션에서도 발생할 수 있어 사용자 경험을 심각하게 저하시킵니다. 브라우저는 계속되는 리렌더링으로 인해 CPU 사용량이 급증하고, 페이지가 응답하지 않게 되며, 최악의 경우 탭이 충돌할 수 있습니다. 이 에러는 React의 안전 장치로, 무한 루프로부터 애플리케이션을 보호하는 역할을 합니다. 에러 스택 트레이스를 확인하면 어느 컴포넌트에서 문제가 발생했는지 파악할 수 있습니다.

발생 원인 5가지

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

가장 흔한 실수는 onClick과 같은 이벤트 핸들러에 함수를 전달할 때 괄호를 붙여 즉시 호출하는 것입니다. 이렇게 하면 렌더링 시마다 함수가 실행되어 상태가 변경되고, 다시 렌더링이 발생하는 무한 루프가 만들어집니다.

2. useEffect 의존성 배열 오류

useEffect 내부에서 상태를 업데이트하면서 해당 상태를 의존성 배열에 포함시키면, 상태 변경이 useEffect를 다시 트리거하고, 이것이 다시 상태를 변경하는 순환 구조가 형성됩니다. 특히 객체나 배열을 의존성으로 사용할 때 참조값 비교로 인해 매번 새로운 값으로 인식되어 문제가 발생합니다.

3. render 메서드 내부에서 setState 호출

클래스 컴포넌트의 render 메서드나 함수형 컴포넌트의 본문에서 직접 setState나 상태 업데이트 함수를 호출하면, 렌더링 → 상태 변경 → 렌더링의 무한 사이클이 발생합니다. 렌더링 로직은 순수해야 하며 부수 효과가 없어야 합니다.

4. 부모-자식 컴포넌트 간 상태 동기화 문제

부모 컴포넌트가 자식에게 props를 전달하고, 자식이 이를 기반으로 부모의 상태를 업데이트하려 할 때, 적절한 조건문 없이 구현하면 양방향 업데이트 루프가 발생할 수 있습니다.

5. 조건 없는 상태 업데이트

useEffect나 이벤트 핸들러에서 현재 상태값을 확인하지 않고 무조건 상태를 업데이트하면, 같은 값으로 업데이트하더라도 React는 이를 새로운 업데이트로 인식하여 리렌더링을 트리거할 수 있습니다.

해결방법 7가지

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

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

// 잘못된 예시 - 렌더링 시마다 함수 즉시 호출
function Counter() {
  const [count, setCount] = useState(0);
  return 클릭;
}

// 올바른 예시 1 - 화살표 함수로 감싸기
function Counter() {
  const [count, setCount] = useState(0);
  return  setCount(count + 1)}>클릭;
}

// 올바른 예시 2 - 함수형 업데이트 사용
function Counter() {
  const [count, setCount] = useState(0);
  return  setCount(prev => prev + 1)}>클릭;
}

해결법 2: useEffect 의존성 배열 최적화

상태를 의존성에서 제거하거나 함수형 업데이트를 활용하세요.

// 잘못된 예시
function DataFetcher() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchData().then(newData => {
      setData([...data, ...newData]); // data가 의존성에 있음
    });
  }, [data]); // 무한 루프 발생
}

// 올바른 예시
function DataFetcher() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    fetchData().then(newData => {
      setData(prev => [...prev, ...newData]); // 함수형 업데이트
    });
  }, []); // 빈 배열로 한 번만 실행
}

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

상태를 업데이트하기 전에 현재 값을 확인하세요.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(userData => {
      // 값이 실제로 변경되었을 때만 업데이트
      if (JSON.stringify(userData) !== JSON.stringify(user)) {
        setUser(userData);
      }
    });
  }, [userId]); // user는 의존성에서 제외
}

해결법 4: useCallback과 useMemo 활용

함수와 객체의 참조를 안정화하여 불필요한 리렌더링을 방지하세요.

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const searchAPI = useCallback(async (searchTerm) => {
    const data = await fetch(`/api/search?q=${searchTerm}`);
    return data.json();
  }, []);
  
  useEffect(() => {
    if (query) {
      searchAPI(query).then(setResults);
    }
  }, [query, searchAPI]); // searchAPI는 변경되지 않음
  
  return  setQuery(e.target.value)} />;
}

해결법 5: ref를 사용한 값 추적

리렌더링을 트리거하지 않으면서 값을 저장해야 할 때 useRef를 사용하세요.

function Timer() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);
  
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
    
    return () => clearInterval(intervalRef.current);
  }, []); // 빈 의존성 배열
  
  return 
{count}
;
}

해결법 6: 상태 구조 개선

여러 관련 상태를 하나의 객체로 통합하여 관리하세요.

// 개선 전
function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);
  
  useEffect(() => {
    validateForm();
  }, [name, email, age]); // 여러 의존성
}

// 개선 후
function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: 0
  });
  
  useEffect(() => {
    validateForm();
  }, [formData]); // 단일 의존성
  
  const updateField = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };
}

해결법 7: useReducer로 복잡한 상태 관리

복잡한 상태 로직은 useReducer로 중앙화하세요.

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  
  return (
    

      
{state.count}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

예방법과 베스트 프랙티스

Maximum update depth exceeded 에러를 예방하려면 몇 가지 원칙을 따라야 합니다. 첫째, 렌더링 로직을 순수하게 유지하세요. 컴포넌트 본문에서 직접 상태를 변경하지 말고, 이벤트 핸들러나 useEffect 내부에서만 변경하세요. 둘째, useEffect의 의존성 배열을 신중하게 관리하세요. ESLint의 react-hooks/exhaustive-deps 규칙을 활성화하면 의존성 누락을 자동으로 감지할 수 있습니다. 셋째, 함수형 업데이트를 습관화하세요. 이전 상태에 기반한 업데이트는 항상 함수형 업데이트를 사용하면 의존성 문제를 피할 수 있습니다. 넷째, React DevTools Profiler를 사용하여 불필요한 리렌더링을 모니터링하고 최적화하세요. 다섯째, 복잡한 상태 로직은 커스텀 훅으로 분리하여 재사용성과 테스트 가능성을 높이세요.

마무리

React의 Maximum update depth exceeded 에러는 처음에는 당황스럽지만, 근본 원인을 이해하면 쉽게 해결할 수 있습니다. 이 에러는 대부분 무한 루프 패턴에서 발생하므로, 상태 업데이트 로직을 신중하게 작성하고, 의존성 배열을 올바르게 관리하며, 이벤트 핸들러를 적절히 전달하는 것이 핵심입니다. 위에서 소개한 7가지 해결 방법과 베스트 프랙티스를 적용하면, 이 에러를 효과적으로 예방하고 해결할 수 있습니다. 코드 리뷰 시 이러한 패턴을 체크하고, 팀 내에서 모범 사례를 공유하여 더 안정적인 React 애플리케이션을 개발하세요.