오늘의 에러 : Too many re-renders. React limits the number of renders to prevent an infinite loop. ( +13,+137

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

react의 한계에 도달할 정도로 리렌더링이 너무 많이 되었다는 에러이다. 주로 잘못된 setState 사용으로 발생한다. React 컴포넌트 내에서는 항상 조건문이나 이벤트 핸들러 안에서만 setState를 사용해야 한다. 만약 setState를 컴포넌트의 바디에서 직접 호출하면 컴포넌트가 렌더링될 때마다 state가 변경되어 무한 루프에 빠질 수 있다.

리액트 컴포넌트 리렌더링 조건

too many re-renders의 이유를 알기 위해서는 리액트가 컴포넌트를 언제 리렌더링 시키는지 알아야 한다.

1. props 변화

2. state 변화

3. 부모요소가 리렌더링 될 때

 

이번 상황은 2번의 상황이 무한반복되어서 나타나는 에러였다.

 

에러 핸들링 방법

아래 코드는 상황은 Too many rerenders에러가 나타날때의 상황이다.

setState를 컴포넌트 바디에 직접 호출한 코드이다.

setText -> 리렌더링 -> setText -> 리렌더링 -> Too many rerenders

• setState로 인해 state가 변화되면 컴포넌트가 리렌더링 된다.
• 컴포넌트가 리렌더링 되면서 또다시 setState가 실행된다.
• 반복하면서 Too many rerenders

• setState를 useEffect안에 넣어주어서 렌더링 후 한번만 실행되게 해준다.

참고링크

https://velog.io/@ppby/Error

Too many re-renders...??

https://velog.io/@lyj-ooz/%EC%97%90%EB%9F%AC-cannot-update-a-component-...-while-rendering-a-different-component-

---

해시태그,댓글창 계속 수정,보완했다.

 

댓글수정이 생각보다 어렵다.

 

서버가 완성되기전에 빨리 완성해놓아야겠다.

 

 

 

---

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.