Frontend/React
[React] Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결
sol_git
2023. 11. 11. 18:00
React 프로젝트 환경 구축 후, 로그인 페이지 만드는 과정에서 마주친 오류 해결 일기:)
우와! 난리가 났다!
Too many re-renders. React limits the number of renders to prevent an infinite loop.
영어를 그대로 해석하면 알 수 있듯, 리렌더링이 무한으로 계속 돌면서 발생하다보니 React에서 터뜨려버린 에러이다.
에러 원인
setState를 잘못 사용했다.
App.js 컴포넌트에서 조건문이나, 이벤트 핸들러 없이 바로 냅다 그냥 호출해버렸더니...
컴포넌트가 렌더링될 때마다 state가 set 되면서 무한 루프에 빠져버린 것...
에러 해결
useEffect안에 setState를 넣어주면, 렌더링 후 한번 실행이 된다!
짜잔! 이렇게 잘 렌더링 돼서 출력되는 것을 볼 수 있다 ㅎㅎ
참고할 개념
React Component 의 리렌더링 조건
- 부모가 리렌더링되면, 자식도 리렌더링 됨
- 자식 컴포넌트의 props나 state 변동사항은 무관
참고 문서 : https://velog.io/@mogulist/understanding-react-rerender-easily