React 모달에서 에러가 보이지 않을 때

React에서 모달 창 안의 폼이나 콘텐츠에 에러가 있으면 조용히 작동하지 않을 수 있다. 사용자에게는 아무 반응이 없어 보이지만, 뒤에서는 뭔가 계속 실패하고 있을 가능성이 크다.

핵심은 모달이 보이는가, 안 보이는가만 봐서는 안 되고, 모달 안의 상태와 콘솔 에러를 함께 봐야 한다는 것이다.

모달이 제대로 렌더링되는지

먼저 모달이 화면에 떠있는지 개발자 도구 Elements 탭에서 DOM을 확인한다. 모달 엘리먼트가 있는데도 display: none이나 visibility: hidden이 아닌지 봐야 한다.

모달 내부의 상태값

모달 안에 폼이 있다면, 그 폼의 상태(loading, error, success)가 뭔지 확인한다. React DevTools를 켜거나, 콘솔에서 직접 컴포넌트 state를 찍어본다.

# 브라우저 콘솔에서
console.log("Modal state:", modalState)
# 또는 React DevTools에서 컴포넌트 props와 state를 실시간으로 추적

콘솔 에러 메시지

브라우저 콘솔을 먼저 본다. 대부분의 경우 에러 메시지가 있는데, 모달이 닫혀 있어서 사용자는 못 본 것일 수도 있다.

이벤트 흐름 추적

사용자가 모달의 버튼을 클릭했을 때 뭐가 일어나는지 추적한다. API 요청이 보내지는지, 응답은 오는지, 응답이 오면 상태가 바뀌는지 하나씩 로그로 남겨본다.

# 모달 열기
// -> 모달이 열렸습니다
# 폼 입력
// -> 입력값이 state에 저장됐습니다
# 버튼 클릭
// -> 요청을 보냈습니다

개발 환경과 프로덕션 빌드 비교

로컬에서는 console.error가 화면에 크게 표시되지만, 프로덕션 빌드에서는 에러가 조용히 무시될 수 있다. production 빌드로 로컬에서 한 번 테스트하면 실제 환경에서 뭐가 일어나는지 알 수 있다.

모바일 뷰포트 확인

데스크톱에서는 모달이 보이는데 모바일에서만 안 보이거나, 모달은 보이지만 콘텐츠가 가려지는 경우도 있다. 브라우저 개발자 도구에서 다양한 뷰포트로 테스트한다.

1. 먼저 모달이 DOM에 있는지 확인한다.
2. 콘솔 에러가 있는지 본다.
3. 모달의 상태값이 기대한 대로 변하는지 확인한다.

마지막 확인

에러를 고친 후에는 모달이 제대로 닫히는지, 다시 열렸을 때 상태가 초기화되는지까지 봐야 한다. 각 단계마다 예상한 결과와 실제 결과를 기록해두면 다음에 비슷한 문제가 나올 때 빨리 찾을 수 있다.