too many re-renders 에러가 왜 뜨는 걸까?

 

Too many-rerenders. React limits the number of renders to prevent an infinite loop.

 

 

 리액트 네이티브로 안드로이드 앱을 만들 때 too many re-renders 에러가 몇 번 떴었다. 처음에는 두 번째 인자의 값이 바뀌면 재렌더링되는 useEffect 때문에 발생한 오류인 줄 알았다. 왜냐하면 지금까지 Too many re-renders 오류가 발생하면 useEffect 부분을 고쳤기 때문이다. 근데 검색해 보니까 주로 useState를 잘못 사용해서 나는 에러라고 한다.  useState에 state값이 계속 업데이트되지 않도록  useEffect로 제어하면 오류를 해결할 수 있다.

 too many-rerenders 오류를 방지하기 위해 먼저 리렌더링이 일어나는 조건을 알아야 한다.

 

1. 컴포넌트의 state가 변경되었을 때
2. 컴포넌트가 상속받은 props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링된 경우 자식 컴포넌트는 모두 리렌더링

 

 

 모든 경우가 합쳐서 무한 루프가 발생한 것 같다. state가 변경됐는데 그게 자식 컴포넌트로 보내지고 다시 자식 컴포넌트에서 컴포넌트가 바뀌니까 다시 렌더링 되고 그게 리덕스에 저장이 되고 부모 컴포넌트에도 영향을 미치고 그럼 또 state가 변경되고...🤮🤮 1번밖에 몰랐는데 2, 3번도 잘 숙지해야겠다.

 

예) 오류 발생 코드

import React, { useState } from 'react';

const Counter = () = {
	const [count, setCount] = useState(0);
    
    setCount(count + 1);
    
    return <div>{count}<div>;
};

export default Counter;

 

`setCount(count + 1)`로 상태를 무한 업데이트 하기 때문에 에러가 발생한다.

 

수정

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

const Counter = () => {
	const [count, setCount] = useState(0);
    
    useEffect(() => {
    	// 상태를 업데이트할 조건 설정
    	if (count < 10) {
        	const timer = setTimeout(() => {
            	setCount(preveCount => prevCount + 1);
       		}, 1000);
        
            // 컴포넌트 언마운트 시 타이머 클리어
            return () => clearTimeout(timer);
        }
	}, [count]); // count가 변경될 때마다 useEffect 실행	

	return <div>{count}</div>;
};

export default Counter;

 

• count가 변경될 때마다 useEffect를 실행한다.
• `if (count < 10)` 조건으로 count가 10일 때만 setCount를 호출한다.
• 컴포넌트가 언마운트 될 때 clearTimeout으로 타이머를 정리한다. 이를 통해 메모리 누수를 방지할 수 있다.

 

 

 

참고: 

https://wnsdufdl.tistory.com/245

오늘의 에러 : Too many re-renders. React limits the number of renders to prevent an infinite loop. ( +13,+137

https://velog.io/@ehdxka3/%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%A1%B0%EA%B1%B4React

리렌더링이 일어나는 조건 (React)