무한 루프 직면할 경우 : Too many re-renders. React limits the number of renders to prevent an infinite loop.

 

상태 관리 작중에 이론, 개념으로만 보던 무한루프를 직접 겪어버렸다.

내가 찾아본 해결 방법은 다음 아래와 같다.

 

1. 이벤트 핸들러 내에서만 상태 업데이트 함수 호출하기: 상태를 업데이트하는 함수(setState 등)는 이벤트 핸들러나 특정 생명주기 메서드(예: useEffect) 내에서만 호출해야 합니다. 컴포넌트의 본문에서 직접 호출하면 안 됩니다.
2. 조건부 렌더링 검토하기: 상태에 따라 컴포넌트를 조건부로 렌더링하는 경우, 상태 업데이트 로직이 무한 루프를 일으키지 않도록 조건을 적절히 설정해야 합니다.
3. useEffect의 종속성 배열 검토하기: useEffect 내에서 상태를 업데이트할 때는 종속성 배열을 올바르게 설정해야 합니다. 잘못된 종속성 배열로 인해 useEffect가 무한히 반복 실행될 수 있습니다.
4. 이벤트 핸들러를 직접 실행하지 않기: 이벤트 핸들러를 컴포넌트의 속성으로 전달할 때는 함수를 실행하지 않고 참조만 전달해야 합니다. 예를 들어, onClick={handleClick()} 대신 onClick={handleClick}을 사용해야 합니다.

 

BEFORE

=> 함수를 직접 호출하였다.

onClick={letterChooseClick('제출')

 

이렇게 하면 함수가 컴포넌트가 렌더링될 때마다 바로 실행되고 그 결과가 이벤트 핸들러로 설정된다.

사용자가 특정 동작(예: 클릭)을 할 때가 아니라, 컴포넌트가 렌더링될 때마다 함수가 실행된다는 것이다.

상태 변경 → 리렌더링 → letterChooseClick 실행 → 상태 변경 → 리렌더링... 과 같은 무한 루프를 일으킨다.

 

AFTER

=> 함수 참조를 만들어, 안에서 원하는 인자를 전달하였다.

onClick={() => letterChooseClick('제출')}

 

이 방식을 사용하면 이벤트 핸들러에 인자를 전달하면서도, 함수가 컴포넌트 렌더링 시점에는 실행되지 않고 클릭 시에만 실행되도록 할 수 있다.

 

해결!