Blog

Maximum update depth exceeded 에러란?

React 개발 중 갑자기 ‘Maximum update depth exceeded’ 에러를 마주한 적이 있나요? 이 에러는 React 컴포넌트가 무한 루프에 빠져 상태 업데이트를 계속 반복할 때 발생합니다. 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번의 중첩된 업데이트를 허용하며, 이를 초과하면 에러를 발생시킵니다. 이는 개발자가 의도하지 않은 무한 렌더링 사이클을 조기에 발견할 수 있도록 도와주는 안전장치입니다. 에러가 발생하면 애플리케이션이 완전히 중단되므로 빠른 해결이 필요합니다. 주로 이벤트 핸들러, useEffect 훅, 또는 라이프사이클 메서드에서 잘못된 상태 업데이트 로직으로 인해 발생합니다.

발생 원인 5가지

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

onClick 등의 이벤트 핸들러에 함수를 전달할 때 함수를 즉시 호출하면 렌더링마다 함수가 실행되어 상태가 변경되고, 이는 다시 렌더링을 유발하는 무한 루프가 발생합니다.

2. useEffect 의존성 배열 문제

useEffect 내부에서 상태를 업데이트하는데, 그 상태가 의존성 배열에 포함되어 있으면 업데이트가 다시 useEffect를 트리거하는 무한 루프가 생성됩니다.

3. setState를 조건 없이 반복 호출

componentDidUpdate나 useEffect에서 조건문 없이 setState를 호출하면 상태 변경이 다시 업데이트를 트리거하여 무한 루프가 발생합니다.

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

부모 컴포넌트의 상태가 자식에게 전달되고, 자식이 다시 부모의 상태를 업데이트하는 구조에서 적절한 조건 검사 없이 동기화하면 순환 업데이트가 발생합니다.

5. 렌더링 중 상태 변경

컴포넌트의 render 함수나 함수형 컴포넌트의 본문에서 직접 setState를 호출하면 렌더링이 상태 변경을 유발하고 다시 렌더링을 트리거하는 무한 사이클이 만들어집니다.

해결방법 7가지

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

// 잘못된 예 - 함수를 즉시 호출
클릭

// 올바른 예 - 함수 참조 전달
클릭

// 인자가 필요한 경우 화살표 함수 사용
 handleClick(id)}>클릭

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

// 잘못된 예
useEffect(() => {
  setCount(count + 1);
}, [count]); // count 변경 시 다시 실행되어 무한 루프

// 올바른 예 - 함수형 업데이트 사용
useEffect(() => {
  setCount(prev => prev + 1);
}, []); // 빈 배열로 한 번만 실행

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

useEffect(() => {
  // 조건 검사로 무한 루프 방지
  if (data && data.value !== currentValue) {
    setCurrentValue(data.value);
  }
}, [data]);

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

const handleUpdate = useCallback(() => {
  setData(newData);
}, [newData]); // 의존성이 변경될 때만 함수 재생성

해결법 5: useMemo로 값 메모이제이션

const processedData = useMemo(() => {
  return expensiveOperation(data);
}, [data]); // data가 변경될 때만 재계산

해결법 6: 렌더링 중 상태 변경 금지

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

// 올바른 예
function Component() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1); // 사이드 이펙트는 useEffect에서
  }, []);
  
  return 
{count}
;
}

해결법 7: 클래스 컴포넌트의 조건부 업데이트

componentDidUpdate(prevProps, prevState) {
  // 이전 값과 비교하여 조건부로만 업데이트
  if (prevProps.userId !== this.props.userId) {
    this.setState({ loading: true });
    this.fetchUserData(this.props.userId);
  }
}

예방법과 베스트 프랙티스

Maximum update depth exceeded 에러를 예방하려면 몇 가지 베스트 프랙티스를 따라야 합니다. 첫째, 항상 useEffect의 의존성 배열을 정확히 관리하고 ESLint의 exhaustive-deps 규칙을 활성화하세요. 둘째, 상태 업데이트 시 이전 값과 비교하는 조건문을 사용하여 불필요한 재렌더링을 방지하세요. 셋째, React DevTools의 Profiler를 사용하여 과도한 렌더링을 모니터링하고 조기에 발견하세요. 넷째, 복잡한 상태 로직은 useReducer를 사용하여 더 예측 가능하게 관리하세요. 마지막으로, 함수형 업데이트(setState(prev => prev + 1))를 적극 활용하여 의존성을 줄이세요.

마무리

Maximum update depth exceeded 에러는 React 개발에서 흔히 마주치는 문제지만, 원인을 정확히 이해하면 쉽게 해결할 수 있습니다. 이벤트 핸들러를 올바르게 전달하고, useEffect의 의존성을 신중하게 관리하며, 조건부 업데이트를 사용하는 것만으로도 대부분의 문제를 예방할 수 있습니다. 이 가이드를 참고하여 안정적인 React 애플리케이션을 개발하시기 바랍니다.