Too many re-renders. React limits the number of renders to prevent an infinite loop 오류 발생시

 

 

 

리액트에서 onClick 이벤트를 발생시키는데 infinite loop에러가 발생하였다. 

 

React Infinite Loop Error

onClick={handleOnClick(데이터)}

리액트에서 발생하는 이 무한루프 에러는 onClick 이벤트 렌더링시에 state를 상태를 변경시키는 함수가 있다면 리렌더링이 계속 발생하면서 발생하게 된다. 

 

해결방안

onClick={()=>handleOnClick(데이터)}

다음과 같이 화살표 함수형으로 변경해주면 오류가 해결된다. 

 

 

(참고한 사이트)

https://born-dev.tistory.com/4

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