ERROR: Too many re-renders.

작업을하다가 백에서 회원탈퇴를 알람으로 알려주는 것이 아니라 

github의 레포지토리를 지울때처럼 동의하는 문구를 입력해야 회원탈퇴게 되게하는게 어떻냐는 의견이 나왔다.

집에와서 바로 모달을 띄워봤는데 

Uncaught runtime errors:
×
ERROR
Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:31011:19)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:34287:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:35583:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:20593:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:20637:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:20694:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:40568:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:39815:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:39738:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:39711:11)

너무 많은 리랜더링이 일어난다고 화면에 경고창이떴다.

원인은 아래의 코드에있었다.

      <Withdraw onClick={setWarning(true)}>회원탈퇴</Withdraw>
      {warning && <Warning />}

setWarning(true)를 onClick 핸들러로 직접 호출하고 있어서 컴포넌트가 렌더링될 때마다 setWarning(true)가 호출되어 상태를 변경하려고 시도하고, 이로인해 infinite loop가 발생하면서 "Too many re-renders" 오류가 발생했다.

 

해결방법은 onClick 핸들러에 콜백 함수로  setWarning(true)를 전달하여 랜더링시 호출되지 않고 버튼이 클릭될때만 실행되도록 하였다.

 

기초적인건데 매번 새롭게 배워간다.