리액트 | Maximum update depth exceeded 에러 해결하기

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

이 에러 메시지는 React에서 컴포넌트가 상태 업데이트의 무한 루프를 유발할 때 발생합니다.

무한 루프 발생 원인 🤓

일반적인 원인 중 하나는 useEffect 훅이 컴포넌트 내부에서 상태를 업데이트하면서, useEffect 훅이 의존성 배열이 없거나 의존성이 매번 렌더링될 때마다 변경되기 때문에 무한 루프를 발생시키는 것입니다.

예를 들어 다음과 같이 코드를 작성하면 Maximum update depth exceeded 에러가 발생할 수 있습니다:

import React, { useEffect, useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count is now:', count);
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

또는 다음과 같이, 의존성을 추가해줬지만 useEffect 내부의 함수가 의존성을 계속 변화시키는 경우에도 발생할 수 있습니다:

import React, { useEffect, useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

에러 해결 방법 👏🏻

이 문제를 해결하려면, useEffect 훅의 의존성 배열에 필요한 상태 또는 프롭이 변경될 때만 업데이트하도록 해당 의존성을 추가하거나, 특정 의존성에 연결되어 있지 않은 경우 상태 업데이트를 useEffect 훅 외부로 이동시켜 해결할 수 있습니다.

다음은 useEffect 훅의 의존성 배열을 업데이트하는 예시입니다:

useEffect(() => {
  // 상태나 변수를 업데이트하는 코드
}, [의존성1, 의존성2]);

의존성 배열에서 의존성1과 의존성2를 지정함으로써, useEffect 훅은 해당 의존성이 변경될 때만 실행되므로 상태 업데이트의 무한 루프를 방지할 수 있습니다.

import React, { useEffect, useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count is now:', count);
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect 더 이해하기

useEffect 훅은 컴포넌트가 렌더링된 후에 실행되기 때문에, useEffect 훅 내에서 setState와 같은 상태 업데이트 함수를 호출하면 컴포넌트가 다시 렌더링되고, 다시 useEffect 훅이 실행됩니다. 이렇게 상태 업데이트 함수를 호출하면 무한 루프가 발생하여 Maximum update depth exceeded와 같은 에러가 발생할 수 있습니다.

또한, useEffect 훅은 기본적으로 컴포넌트가 렌더링될 때마다 실행됩니다. 이 때, useEffect 훅이 상태를 업데이트하면, 다시 렌더링되고 다시 useEffect 훅이 실행되어 무한 루프가 발생할 수 있습니다. 이런 경우에는, useEffect 훅의 의존성 배열에 필요한 상태나 프롭을 추가하여 의존성이 변경될 때만 useEffect 훅이 실행되도록 해야 합니다.

따라서, useEffect 훅에서 상태를 업데이트하거나 의존성 배열을 잘못 설정하면 무한 루프가 발생하여 Maximum update depth exceeded와 같은 에러가 발생할 수 있습니다. 이를 방지하기 위해서는 상태 업데이트와 의존성 배열 설정을 주의깊게 처리해야 합니다.

참고 : 이 에러의 원인을 식별하는 데 문제가 있으면, React 개발자 도구를 사용하여 컴포넌트의 상태와 프롭을 디버그해볼 수 있습니다. 또한 useEffect 및 훅의 규칙과 관련된 문서를 검토하여 나중에 비슷한 문제를 방지할 수 있습니다.