[React] Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결

 

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