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

도입

React 개발 중 Maximum update depth exceeded 에러를 만나셨나요? 이 에러는 컴포넌트가 무한 렌더링 루프에 빠졌을 때 발생하는 대표적인 React 에러입니다. Maximum update depth exceeded는 “최대 업데이트 깊이 초과”라는 의미로, React가 컴포넌트의 무한 업데이트를 감지하고 애플리케이션을 보호하기 위해 던지는 경고입니다. 이 에러는 주로 setState나 이벤트 핸들러의 잘못된 사용에서 발생하며, 초보 개발자부터 숙련된 개발자까지 누구나 한 번쯤 겪는 문제입니다. 이 글에서는 Maximum update depth exceeded 에러의 원인과 해결 방법을 상세히 알아보겠습니다.

에러 상세 분석

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회)를 초과하면 에러를 발생시킵니다. 이 에러는 컴포넌트가 렌더링될 때마다 상태 업데이트를 트리거하고, 그 상태 업데이트가 다시 렌더링을 유발하는 순환 구조에서 발생합니다. 브라우저 콘솔에서 빨간색으로 표시되며, 애플리케이션이 완전히 중단될 수 있습니다. 이 에러를 해결하려면 상태 업데이트와 렌더링 사이클의 관계를 정확히 이해해야 합니다.

발생 원인 5가지

1. 렌더링 중 setState 직접 호출

컴포넌트의 render 메서드나 함수 컴포넌트 본문에서 직접 setState를 호출하면 렌더링 → setState → 렌더링의 무한 루프가 발생합니다. 렌더링은 순수 함수여야 하며 부수 효과가 없어야 합니다.

2. 이벤트 핸들러를 즉시 실행

onClick={handleClick()}처럼 이벤트 핸들러에 괄호를 붙여 즉시 실행하면, 렌더링될 때마다 함수가 호출되어 상태가 업데이트되고 다시 렌더링이 발생합니다. 올바른 방법은 onClick={handleClick}처럼 함수 참조를 전달하는 것입니다.

3. useEffect의 의존성 배열 오류

useEffect 내부에서 상태를 업데이트하면서 해당 상태를 의존성 배열에 포함시키면, 상태 업데이트 → useEffect 재실행 → 상태 업데이트의 무한 루프가 발생합니다. 의존성 배열을 신중하게 설정해야 합니다.

4. componentDidUpdate에서 무조건 setState

클래스 컴포넌트에서 componentDidUpdate 내부에 조건문 없이 setState를 호출하면, 업데이트 → setState → 업데이트의 무한 반복이 일어납니다. 반드시 조건문으로 특정 상황에만 업데이트하도록 제한해야 합니다.

5. 상태 객체의 잘못된 비교

객체나 배열을 상태로 사용할 때, 값은 같지만 참조가 다른 새 객체를 계속 생성하면 React는 이를 변경으로 인식하고 계속 렌더링을 반복합니다. 불변성을 지키면서도 불필요한 객체 생성을 피해야 합니다.

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

1. 이벤트 핸들러 올바르게 전달하기

이벤트 핸들러에 괄호를 제거하여 함수 참조만 전달합니다.

// ❌ 잘못된 방법
증가

// ✅ 올바른 방법
 setCount(count + 1)}>증가
// 또는
증가

2. useEffect 의존성 배열 올바르게 설정

상태 업데이트 시 함수형 업데이트를 사용하여 의존성을 제거합니다.

// ❌ 잘못된 방법
useEffect(() => {
  setCount(count + 1);
}, [count]);

// ✅ 올바른 방법
useEffect(() => {
  setCount(prev => prev + 1);
}, []); // 필요한 경우에만 의존성 추가

3. 렌더링 중 setState 제거

상태 업데이트는 이벤트 핸들러나 useEffect에서만 수행합니다.

// ❌ 잘못된 방법
function Component() {
  const [data, setData] = useState([]);
  setData([1, 2, 3]); // 렌더링 중 호출
  return 
{data}
;
}

// ✅ 올바른 방법
function Component() {
  const [data, setData] = useState([1, 2, 3]); // 초기값 설정
  return 
{data}
;
}

4. componentDidUpdate에 조건문 추가

클래스 컴포넌트에서는 이전 props나 state와 비교하여 조건부로 업데이트합니다.

// ❌ 잘못된 방법
componentDidUpdate() {
  this.setState({ count: this.state.count + 1 });
}

// ✅ 올바른 방법
componentDidUpdate(prevProps, prevState) {
  if (prevProps.value !== this.props.value) {
    this.setState({ count: this.state.count + 1 });
  }
}

5. useMemo로 불필요한 객체 생성 방지

복잡한 계산이나 객체 생성을 메모이제이션하여 참조 동일성을 유지합니다.

// ❌ 잘못된 방법
function Component() {
  const [state, setState] = useState({});
  const config = { theme: 'dark' }; // 매번 새 객체 생성
  useEffect(() => {
    setState(config);
  }, [config]); // config가 매번 바뀌어 무한 루프
}

// ✅ 올바른 방법
function Component() {
  const [state, setState] = useState({});
  const config = useMemo(() => ({ theme: 'dark' }), []);
  useEffect(() => {
    setState(config);
  }, [config]);
}

6. useCallback으로 함수 메모이제이션

함수를 의존성으로 사용할 때 useCallback으로 감싸서 참조를 유지합니다.

// ✅ 올바른 방법
const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

useEffect(() => {
  // handleClick 사용
}, [handleClick]);

7. 초기 상태를 함수로 전달

복잡한 초기 상태 계산은 함수로 전달하여 최초 렌더링 시에만 실행되도록 합니다.

// ✅ 올바른 방법
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation();
  return initialState;
});

예방법과 베스트 프랙티스

1. 렌더링 순수성 유지: 컴포넌트 렌더링은 항상 순수 함수여야 하며, 부수 효과(setState, API 호출 등)는 useEffect나 이벤트 핸들러에서만 수행해야 합니다.

2. 의존성 배열 정확히 관리: ESLint의 react-hooks/exhaustive-deps 규칙을 활성화하여 의존성 배열을 올바르게 관리합니다.

3. 함수형 업데이트 활용: setState에서 이전 상태에 의존할 때는 항상 함수형 업데이트(setState(prev => …))를 사용합니다.

4. React DevTools 활용: Profiler를 사용하여 불필요한 렌더링을 추적하고 최적화합니다.

5. 상태 구조 단순화: 복잡한 중첩 객체보다는 평탄한 상태 구조를 유지하여 업데이트 로직을 명확하게 만듭니다.

마무리

Maximum update depth exceeded 에러는 React의 렌더링 사이클과 상태 업데이트 메커니즘을 이해하면 쉽게 해결할 수 있습니다. 이벤트 핸들러의 올바른 사용, useEffect 의존성 배열의 정확한 관리, 렌더링 순수성 유지가 핵심입니다. 이 가이드에서 제시한 7가지 해결 방법을 적용하고 베스트 프랙티스를 따르면, 더 이상 이 에러로 고생하지 않을 것입니다. 코드 작성 시 항상 렌더링과 상태 업데이트의 흐름을 염두에 두고 개발하세요.