1. 내용
1
2
3
4
5
6
7
8
9
■ 에러
Too many re-renders. React limits the number of renders to prevent an infinite loop
■ 내용
[React re-renders 무한루프]
처음에는 단순히 setState를 처리할 함수를 화살표 함수로 작성해서 발생했다고 생각했다.
하지만, function 일반 함수로 작성해도 동일한 증상이 발생했다.
알고보니, onClick 이벤트에 바로 함수가 실행되도록 작성해서 발생한 오류였다.
2. 해결
1
위와 같은 함수 형태로 변경하고, 초기 랜더링 시 수행되지 않는 것을 확인했다.
3. 기타
1
2
3
4
5
6
7
8
9
이번 문제로 알게 된 내용.. (무지하다..)
1. function(일반 함수)
- 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정
- 동적 바인딩은 런타임 시 처리
2. () => (화살표 함수)
- 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정
- 정적 바인딩은 컴파일 시 처리