[React] "Too many re-renders. React limits the number of renders to prevent an infinite loop."troubleshooting2023. 9. 20. 12:44
목차
1. 문제 상황
리액트 앱을 개발하면서 영화 정보를 표시하고 선택한 영화에 대한 모달을 보여주는 기능을 구현 중 에러가 발생했다.
2. 에러 원인 분석
2.1 에러 메시지 이해
먼저, 이 에러 메시지가 무엇을 의미하는지 이해해야 한다. 이 에러는 일반적으로 무한 루프가 발생했음을 나타내며, 이는 리액트가 특정 구성 요소를 너무 많이 다시 렌더링하려고 시도했음을 의미한다.
2.2 리액트의 리렌더링 한계
리액트는 무한 루프를 방지하기 위해 리렌더링 횟수에 한계를 둔다. 이를 이해하는 것이 이 문제의 핵심이다.
3. 해결 방법
문제의 핵심은 handleClick 함수에서 발견되었다. 이벤트 핸들러에 직접 함수를 호출하는 대신, 함수 참조를 전달해야 한다.
4. 코드 수정
변경 전:
{movies.map((movie) => (<img key={movie.id} ... onClick={handleClick(movie)} />))}
변경 후:
{movies.map((movie) => (<img key={movie.id} ... onClick={() => handleClick(movie)} />))}
5. 결과 및 결론
코드 변경 후, 앱은 정상적으로 작동하며 무한 렌더링 문제가 해결되었다. 함수 참조를 올바르게 전달함으로써 이러한 유형의 문제를 피할 수 있다.
6. 참고 자료
728x90
반응형
LIST
'troubleshooting' 카테고리의 다른 글
TypeError : r.map is not a function (1) | 2023.12.22 |
---|---|
TypeError: Cannot read properties of undefined (reading 'length') (0) | 2023.12.21 |
cannot read properties of null (reading 'scrollTop')_MUI error (0) | 2023.12.13 |
[React] react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function (0) | 2023.09.20 |
@kdj :: Childev'note
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!