Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

리렌더링이 너무 많이 되고 있다는 내용이다.

리액트는 어떤 상황이서 렌더링 되는가?

리액트렌더링 조건

1. state변경이 있을때

2. props가 들어올때

3. 부모컴포넌트가 렌더링 될때

4.  더있는데 아직 느껴본적 없어서 우선 위 세가지

 

에러를 만나기전 내 상황은 아래와 같다.

1. 로그인 확인을 위해서 리덕스 스토어에 저장한 isAuthenticated를 App.js에서 localstorage token유무에 따라

true, false를 dispatch를 통해 변경한다.

2. isAuthenticated를 필요한 컴포넌트들에 props로 보낸다.

 

깔끔하게 만들고 싶어서 App.js에서 필요한 곳에 props로 전송하자는 아이디어였는데 이게 문제였던것으로 보인다.

우선 props를 제거하고 필요한 컴포넌트에서 각각 리덕스에서 값을 가져오니 해결되었다.