최대 업데이트 깊이를 초과했습니다. 구성 요소가 useEffect 내에서 setState를 호출하지만 useEffect에 종속성 배열이 없거나 종속성 중 하나가 렌더링될 때마다 변경되는 경우에 발생할 수 있습니다.

이 오류 메시지는 React의 구성 요소가 상태 업데이트의 무한 루프를 트리거할 때 발생합니다.

무한 루프의 원인

일반적인 원인은 useEffect 후크가 구성 요소 내부의 상태를 업데이트하고 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);
  });

  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));

“dependencies” 배열에 “dependency1” 및 “dependency2″를 지정하면 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 후크가 다시 실행됩니다. 이러한 방식으로 상태 업데이트 함수를 호출하면 무한 루프가 발생하여 “최대 업데이트 깊이 초과”와 같은 오류가 발생할 수 있습니다.

또한 기본적으로 useEffect 후크는 구성 요소가 렌더링될 때마다 실행됩니다. 이 경우 useEffect 후크가 상태를 업데이트하면 다시 렌더링되고 useEffect 후크가 다시 실행되어 무한 루프가 발생합니다. 이 경우 useEffect 후크가 종속성이 변경될 때만 실행되도록 필요한 상태 또는 소품을 useEffect 후크의 종속성 배열에 추가해야 합니다.

따라서 useEffect 후크에서 상태를 업데이트하거나 종속성 배열을 잘못 설정하면 무한 루프가 발생하여 “최대 업데이트 깊이 초과”와 같은 오류가 발생할 수 있습니다. 이를 방지하려면 상태 업데이트 및 종속성 배열 설정을 신중하게 처리해야 합니다.

참조 : 이 오류의 원인을 식별하는 데 문제가 있는 경우 React Developer Tools를 사용하여 구성 요소의 상태 및 소품을 디버깅할 수 있습니다. 또한 미래에 유사한 문제를 피하기 위해 useEffect 및 후크의 규칙에 대한 문서를 확인하십시오.