Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러

Too many re-renders.에러

 

관리자 페이지를 만들다가 만난 문제를 해결하다가 오랜만에 발견한 에러였다 !!

 

 

이 코드를 보면 onClick = {forUpdateModal(user)} 로 작성을 했다. 나는 user이라는 객체를 매개변수로 담고 실행시키고 싶었다. 그렇기 때문에 저렇게 하면 되겠지 ~ 라고 했는데

 

 

이러한 오류가 나면서 rendering이 무한 반복이 되고 있다라며 에러 설명글이 있었다.

 

처음에 이걸 보는 순간 아차 싶었다..!! 과거 자바스크립트를 배울 당시 onClick ={콜백함수}를 해줘야 한다는 강사님의 말이 기억났다.

 

그래서 바로 그렇게 바꿨더니

 

오류 없이 정상적으로 작동이 되었다.

 

원인을 파악해 보면

 

일일반 함수를 넣을 경우 랜더링 되는 과정에서 그 함수가 바로 호출이 되어 버린다. 나는 onClick 즉, 클릭 했을 때 작동해야 할 함수가 곧바로 나의 의지 상관없이 실행되는 것이다. 그러면서 값이 만약에 달라지게 되면 무한랜더링이 발생하는 문제까지 발생하게 된다.

 

이렇게 onClick의 기능을 제대로 하지 못할 뿐 더러 무한 랜더링이라는 잠재적인 오류도 있기 때문에

 

React에서는 이러한 구문 자체를 막아 놓았다.

 

이를 해결하고자 onClick={콜백함수} 를 적용함으로써, 내가 클릭시에 작동 될 수 있도록 한 것이다.