[React] Error: Maximum update depth exceeded 해결법

개요

이벤트 설정 시 발생하는 무한 루프 문제의 원인과 해결책을 알아보자. Maximum update depth exceeded 에러를 해결해보자.

이슈 원인

onClick={this.function()}

 

위와 같이 이벤트를 설정할때 함수에 괄호를 붙이면

Render 될때마다 함수를 호출하기 때문에 무한 루프가 발생한다.

ex) 함수 호출 => render => 함수 호출 => render ...

따라서 괄호가 붙지 않는 즉, 파라미터가 없는 함수는 이슈가 발생하지 않는다.

반응형

해결책

파라미터를 넘기지 않는다면 괄호만 지우면 해결된다.

파라미터를 넘겨야 한다면 아래처럼 Arrow function을 사용하면 된다.

onClick={() => this.function()}