Blog

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는 기본적으로 50번의 중첩된 업데이트를 허용하며, 이를 초과하면 에러를 발생시킵니다.

에러가 발생하는 근본적인 이유는 컴포넌트의 렌더링 과정에서 상태 변경이 일어나고, 그 상태 변경이 다시 렌더링을 트리거하며, 이것이 무한히 반복되기 때문입니다. 이는 성능 저하는 물론 브라우저 크래시까지 초래할 수 있어 반드시 해결해야 하는 중요한 문제입니다.

발생 원인 5가지

1. 렌더 중 setState 직접 호출

컴포넌트의 render 메서드나 함수형 컴포넌트의 본문에서 직접 setState를 호출하면 렌더링 → 상태 변경 → 렌더링의 무한 루프가 발생합니다.

2. useEffect 의존성 배열 오류

useEffect 내부에서 상태를 변경하면서 의존성 배열에 해당 상태를 포함시키면 effect 실행 → 상태 변경 → effect 재실행의 순환이 발생합니다.

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

onClick 등의 이벤트 핸들러에 함수를 즉시 실행하는 형태로 전달하면 렌더링마다 함수가 실행되어 무한 루프에 빠집니다.

4. componentDidUpdate에서 무조건 setState

클래스 컴포넌트의 componentDidUpdate에서 조건 없이 setState를 호출하면 업데이트 → setState → 업데이트가 반복됩니다.

5. 파생 상태의 잘못된 사용

props로부터 파생된 state를 useEffect로 동기화할 때 잘못 구현하면 무한 업데이트가 발생할 수 있습니다.

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

1. 이벤트 핸들러 함수 참조로 전달

// 잘못된 코드
증가

// 올바른 코드
 setCount(count + 1)}>증가
// 또는
증가

2. useEffect 의존성 배열 수정

// 잘못된 코드
useEffect(() => {
  setData(processData(data));
}, [data]);

// 올바른 코드
useEffect(() => {
  setData(processData(initialData));
}, []); // 빈 배열 또는 필요한 의존성만 포함

3. 조건부 상태 업데이트

useEffect(() => {
  if (props.value !== state.value) {
    setState({ value: props.value });
  }
}, [props.value, state.value]);

4. useMemo/useCallback 활용

const processedData = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

5. 파생 상태 대신 계산된 값 사용

// 잘못된 방법
const [filtered, setFiltered] = useState([]);
useEffect(() => {
  setFiltered(items.filter(item => item.active));
}, [items]);

// 올바른 방법
const filtered = items.filter(item => item.active);

6. componentDidUpdate 조건 추가

componentDidUpdate(prevProps) {
  if (this.props.value !== prevProps.value) {
    this.setState({ value: this.props.value });
  }
}

7. 함수형 업데이트 사용

// 이전 상태에 의존할 때
setCount(prevCount => prevCount + 1);
setItems(prevItems => [...prevItems, newItem]);

예방법과 베스트 프랙티스

Maximum update depth exceeded 에러를 예방하려면 몇 가지 원칙을 지켜야 합니다. 첫째, 렌더링 단계에서는 절대 상태를 직접 변경하지 않습니다. 둘째, useEffect의 의존성 배열을 정확하게 설정하고 ESLint의 exhaustive-deps 규칙을 활성화합니다. 셋째, 파생 상태보다는 계산된 값을 사용하는 것을 우선시합니다. 넷째, 이벤트 핸들러는 항상 함수 참조로 전달하며, 다섯째, React DevTools의 Profiler를 사용해 불필요한 리렌더링을 모니터링합니다. 이러한 베스트 프랙티스를 따르면 대부분의 무한 루프 문제를 사전에 방지할 수 있습니다.

마무리

Maximum update depth exceeded 에러는 React 개발에서 흔히 마주치는 문제지만, 원인을 정확히 이해하면 쉽게 해결할 수 있습니다. 이벤트 핸들러의 올바른 사용, useEffect 의존성 관리, 조건부 업데이트 등의 방법을 적용하면 대부분의 경우 문제가 해결됩니다. 앞으로 개발할 때는 예방법을 숙지하여 동일한 에러가 발생하지 않도록 주의하시기 바랍니다. 이 가이드가 여러분의 React 디버깅에 도움이 되기를 바랍니다.