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

 

기존의 array에 input 을 통해 받은 데이터를 넣으려는 코드를 작성하고 있었는데..

 

이와 같은 에러가 발생했다.

 

찾아보니 랜더링 과정에서 state를 변화하는 함수가 동시에 존재하면 리랜더링이 일어난다는 것이다.

 

저기서 그러면 setOnChangeDate 즉 useState 함수로 받지말고 그냥 변수에 저장해서

array에 추가해야겠다 라는 생각이 들었다. 

 

어라 ... 안되네 ..

나중에 해결하면 다시오겠다... 일단 비공개 ..ㅎㅎ

 

---

 

해결했다!!!

 

위에 코드를 보면 setArray안에 array 함수 자체를 콜백해서 array를 추가하려고 한 코드를 볼수 있다.

 

useState 의 set 함수와 동시에 array를 콜백해서 바뀌면 음 .. 내가 봐도 복잡하긴 하구나.

 

state가 여러번 무한루프된다? 라는 느낌까지는 아니지만 확실히 여러단계를 한번에 진행하는 느낌이다.

(해당 내용은 좀 더 알아보고 정리하겠다.)

 

그래서 그 단계를 풀어서 해보기로 했다

 

일단 array 함수에 새 데이터 값을 넣는것을 먼저 하고

setArray 를 쓰기 위해서 새 참조 변수에 담아주고!

그 후에 setArray에 담았더니 잘 작동 되었다.

 

밑에 setOnChangeData(""); 는 그냥 입력후 input창을 깨끗이 비워주기 위한 코드이므로 신경안써도된다.

 

그래도 생각한데로 풀리니까 뭔가 뿌듯하다. 위에 무한루프 개념은 이곳저곳에 물어봐서라도 꼭 추가하겠다.

---

이곳 저곳에서 알아본 무한 루프 !! 해결책!

onClIck은 함수를 실행시키는게 아니라 클릭시 콜백으로 실행 시킬 함수를 받는 이벤트 핸들러이다.

하지만 코드에서는 onClcik에서 바로 setState 함수를 실행시키려고 하면 상태가 변하면서 리 렌더링이 일어나고 또 상태가 변하면서 리 렌더링이 일어나는 무한루프에 빠지게 된다고 한다.

 

따라서 위 함수를

다음과 같이 실행 시킬 함수를 넘기는 방식으로 해야 한다.

 

 

좀 더 넓은 개념으로 보완설명을 해주셨다.

 

onClick의 값으로 setArray()를 실행시키고 그 결과값(void)을 넘기는 것과

()=>setArray() 라는 함수를 넘기는 차이입니다.

 

props.onClick = setArray 형태가 됐을 때는 onClick에 함수 자체가 연결 돼

클릭 이벤트가 발생할 때만 setArray 함수를 실행시키는데

 

props.onClick = setArray() 형태가 된다면 렌더링을 할때 onClick 메서드에 함수 연결이 아닌

바로 실행시켜 버리면서 그 결과값(undefined)이 onClick에 들어간다.

 

결국 렌더링 과정에서 array의 state 값이 변하게 되면서 리렌더링을 하고 onClick에 다시 setArray()의

결과값을 넣어주기 위해 setArray 함수를 실행시키게 되고 또 array의 값이 변하는 무한루프에 빠지게 된다.

 

 

html 중간에 함수() 이렇게 적으면 html 렌더링시 바로 실행해준다.

 

 

 

관련한 비슷한 내용의 답변

 

 

 

( okky.kr 닉네임 허어니님 .. 정말 감사드립니다..!)

출처:1005hoon (hoon) · GitHub 감사드립니다.