[React] Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 에러

리액트 작업 중 input의 onChange 이벤트를 처리하는 과정에서 매게변수를 전달하려다 에러가 발생하였다. 

해당 에러는 onChange, onClick 등에서 발생하는 듯 하다.

 

<input id='loop' type='checkbox' checked={loop} onChange={this.handleToggleLoop()} />

와 같이 this.handleToggleLoop()로 작성하게 되면 함수를 반복해서 호출하게 된다.

 

<input id='loop' type='checkbox' checked={loop} onChange={this.handleToggleLoop} />

또는

<input id='loop' type='checkbox' checked={loop} onChange={() => this.handleToggleLoop()} />

형태로 사용하면 원하는대로 동작하게 된다.