-
[react] Too many re-renders. React limits the number of renders to prevent an infinite loop.react+vue 2022. 9. 22. 14:50
react 실습을 하던 중 잘 따라하고 있다고 생각했는데 위의 에러 메세지를 만났다.
문제 코드
function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return <div> <button onClick={setStr("안녕")}>문자 변경</button> <button onClick={() => { setList([...list,10]); }}>리스트값 추가</button> <div> {list.map(i => (<h1>{ i}</h1>))} </div> <div>{ str}:{getAddResult()}</div> </div> } export default App;
App함수가 실행될때 onClick 이벤트 핸들러가 로드되면서 setStr(”안녕”) 함수가 실행된다.
실행 과정이 App()⇒ setStr(”안녕”)⇒상태변수 변경으로 UI reload ⇒App()…무한 반복이 된다.
해결 방법
function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState("합계"); const getAddResult=()=>{ let sum = 0; list.forEach(i => sum = sum + i); console.log("sum", sum); console.log("getAddResult 실행됨"); return sum; } return <div> <button onClick={()=>setStr("안녕")}>문자 변경</button> <button onClick={() => { setList([...list,10]); }}>리스트값 추가</button> <div> {list.map(i => (<h1>{ i}</h1>))} </div> <div>{ str}:{getAddResult()}</div> </div> } export default App;
onClick 이벤트 핸들러에 함수를 실행시키지 말고, 실행될 함수를 만들어준다
setStr(”안녕”); X
()⇒setStr(”안녕”); O
'react+vue' 카테고리의 다른 글
[react] useRef (0) 2022.09.22 [react] useMemo (0) 2022.09.22 [javascript] import/export 방법 (0) 2022.09.21 [react] useEffect (0) 2022.09.21 [react] useState (1) 2022.09.21