Maximum call stack size exceeded 에러 해결

오늘 마주친 에러와 그 해결 과정을 정리해 보려고 한다. 

문제 발생:

오늘 작업 중에 갑자기 화면이 깜빡이며 작동을 멈추고, 개발자 도구를 열어보니 "Maximum call stack size exceeded"라는 에러가 떴다. 처음에는 왜 이런 에러가 나는지 이해하지 못했지만, 결국 원인을 알게 되었다.

원인:

에러의 원인은 내가 작성한 코드 중에서 반복 호출이 계속 일어나면서 스택이 너무 깊어져서 발생한 것이었다. 에러 메시지에서 확인한 부분은 deleteTodo 함수에서 자기 자신을 호출하고 있는데, 이 함수 내에서 또 자기 자신을 호출하고 있다. 이것이 무한 루프를 만들어내고, 결국 호출 스택이 넘치면서 오류가 발생하게 했다. 아래는 에러가 발생한 부분 코드이다.

const deleteTodo = (id) => dispatch(deleteTodo(id));

액션크리에이터를 정의할 때 사용한 이름이 button의 onclick 핸들러 함수에서 동일하게 사용되었다는 것을 전혀 눈치채지 못하는 바람에 이런 일이 생겼다. 

 

해결 과정:

먼저, 에러 메시지를 통해 어떤 함수에서 문제가 발생하는지 확인했고, 해당 함수를 찾아가 보니, deleteTodo 함수에서 무한 호출이 일어나고 있었다. 해결책으로는 함수 이름을 변경하여 충돌을 피하도록 했다. Action Creator의 함수를 deleteTodoAction으로 바꾸고 이를 호출하는 부분도 함께 수정했다.

 

코드 수정:

const deleteTodo = (id) => dispatch(deleteTodoAction(id));

이렇게 수정하고 나니, 에러가 사라지고 의도한 대로 화면이 정상적으로 작동하게 되었다.

정리

1. Maximum call stack size exceeded 오류: 이 오류는 함수 호출이 계속해서 쌓여서 호출 스택이 너무 깊어져서 발생한다. 재귀 함수에서 잘못된 조건으로 인해 무한히 호출되는 경우에 주로 발생한다고 하는데, 나의 경우 함수명이 동일하게 사용되고 있는 것을 인지하지 못해 문제가 생겼다.
2. 함수 이름 충돌: 동일한 함수 이름을 사용하면 함수가 자기 자신을 계속해서 호출하여 무한 루프가 발생할 수 있다. 함수 이름을 다르게 지정하여 충돌을 피하자.

앞으로는 함수의 이름 충돌에 대해 조심하면서 개발을 진행해야겠다.