[오류] RangeError : Maxmum call stack size exceeded 원인과 해결

 

계정 등록 페이지에서  폼 필드에 값을 입력하고 '저장'버튼을 눌렀더니 

'RangeError : Maxmum call stack size exceeded' 라는 에러가 떴다. 

보통 재귀함수를 호출할때 발생하는 에러다.

 

해당 view 코드를 확인해보니 저장버튼을 눌렀을때 모달을 띄워 확인과 취소를 실행하게 하는데, 이때 취소버튼을 눌렀을때 모달이 닫히면서 현재 페이지의 상태를 유지해야한다. 

   const handleRegister = handleSubmit(()=>{
      showModal({
                  type: "default",
                  dimmedColor: "transparent",
                  title: "저장 성공",
                  description: "저장이 완료되었습니다.",
                  negative: undefined,
                  positive: {
                    text: "확인",
                    variant: "soft",
                    onClick: () => {
                      hideModal();
                      router.push(LINK_ROUTE.DASHBOARD.COMPANY.LINK.DEFAULT());
                    },
                  },
                  onClose: () => {
                    router.push(LINK_ROUTE.DASHBOARD.COMPANY.LINK.DETAIL());
                  },
                });
   })

근데 내가 onClose했을때 모달을 닫히는 함수를 따로 실행하지 않고 router 이동만 해놓은 것이다.

 

❌ hideModal() 없이 router.push()만 했을 때

1. [handleRegister] ← 호출
2. [handleRegister > showModal] ← 모달 표시
3. [handleRegister > showModal > positive.onClick] ← 저장 버튼 클릭
4. [... > router.push] ← 페이지 이동 시도
5. [... > React re-render] ← 컴포넌트 리렌더링
6. [... > ModalComponent render] ← 모달이 여전히 열려있어서 렌더링
7. [... > showModal] ← 모달 상태 때문에 다시 모달 호출
8. [... > positive.onClick] ← 다시 버튼 클릭 이벤트
9. [... > router.push] ← 또 다시 페이지 이동
10. [... > React re-render] ← 또 다시 리렌더링
11. [... > ModalComponent render]
12. [... > showModal]

 

✅ hideModal() 먼저 호출했을 때

1.  [handleRegister] ← 호출
2. [handleRegister > showModal] ← 모달 표시
3. [handleRegister > showModal > positive.onClick] ← 저장 버튼 클릭
4. [... > hideModal] ← 모달 상태 초기화
5. [... > router.push] ← 페이지 이동
6. [... > React re-render] ← 컴포넌트 리렌더링
7. ✅ 모달이 닫혀있어서 무한 루프 없음
8. Stack이 정상적으로 비워짐

 

따라서 hideModal로 모달을 닫히고 컴포넌트가 렌더링이 되어야하는데 계속 Modal이 열려있으면서 컴포넌트가 재렌더링이 계속 되니까

맥시멈 콜스택이라고 에러가 떴던 것! 

 

 

 onClose: () => {
     hideModal();
    // router.push(LINK_ROUTE.DASHBOARD.COMPANY.LINK.DETAIL()); 모달창만 닫으면 되니까 사실상 router 이동은 필요 없음.
 },

 

이렇게 수정하면 해당 에러가 사라진다!