7월 14일 TIL - too many re-renders. react limits the number of renders to prevent an infinite loop.

토이프로젝트에서 게시글 수정, 삭제 시 비밀번호를 입력받는 모달창 state값을 변경하는 함수를 리펙토링 하다가 난 에러

 

 

에러코드

onClick={openModalHandle("delete")}

const openModalHandle = (caseMessage) => {
    switch (caseMessage) {
      case "delete":
        setDeleteModalIsOpen(true);
        break;
      case "modify":
        setModifyModalIsOpen(true);
        break;
    }
  };

버튼에 onClick 속성으로 모달의 state 값을 변경했다.

렌더 과정에서 state를 변화하는 함수로 인해 반복해서 리렌더링 하게 되는데 setState는 콜백으로 다시 렌더링을 트리거 해서 그 과정 중에서 무한루프에 빠지게 되어 이런 에러가 발생한 것 같다. 

 

 

 

해결 방법

onClick에 넣은 함수를 화살표 함수로 래핑함으로써 해당 코드는 사용자가 클릭할 때만 변할 수 있도록 했다. 그렇게 되면 무한루프에 걸리지 않게 된다

 onClick={() => openModalHandle("modify")}

간단하군