React.js -Maximum update depth exceeded. 해결법

 react.dom.development.js:23803 Uncaught 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.

 

onClick 같은 이벤트함수에서 아래와 같이 작성했을 때 위 오류가 나타나는 것 같다.

setIsEditing()을 부른다 -> 컴포넌트를 재렌더링한다 -> 다시 setIsEditing()을 부른다 => 반복

함수를 부른다? -> {} 안에 함수명+()를 쓰면 바로 호출이라는 의미이다

 

그래서 함수를 무한정으로 다시 부르고 싶지 않다면 아래와 같은 코드로 작성하거나, 매개변수가 없을 땐 ()는 붙이지 않고 함수명만 작성해놔야 한다.

 

++) React 이벤트의 특징: 이벤트에 실행할 코드를 전달 (x) => 함수 형태의 객체를 전달 (o)

이벤트에 실행할 코드를 전달한다면, 이벤트가 호출되는 것으로 간주하여 바로 실행되고, 제대로 연결이 되지 않는다.

화살표 함수를 이용한 콜백 함수의 형태로 전달해야 한다.

 

참고, 출처: https://kss7547.tistory.com/36

"내가 어떤 문제가 있었고, 이것을 해결하기 위해 이렇게 작성했다"