React 모달이 예상과 다르게 동작할 때

모달 문제는 대부분 상태 관리에서 나온다. 검색해서 들어온 상황이라면 재현 조건부터 명확히 하자.

화면만 봐서는 원인을 모를 수 있다. 브라우저 DevTools에서 상태도 함께 봐야 한다.

사용자가 보는 모습

모달이 열려야 할 때 안 열리는가? 닫혀야 할 때 안 닫히는가? 아니면 둘 다인가?

개발자가 보는 신호

React DevTools에서 모달 컴포넌트의 상태를 확인하자. isOpen, isVisible 같은 상태 값이 정말 바뀌고 있는가?

• 모달을 여는 버튼 클릭 시 상태 변화
• 닫기 버튼 클릭 시 상태 변화
• 정상 상태의 값이 뭔가

이벤트 흐름 확인

npm run build
# 브라우저 콘솔에서 onClick 이벤트가 정상 실행되는지 확인

버튼 클릭이 정상적으로 전달되고 있는가? 이벤트 핸들러가 제때 실행되는가?

환경 차이 확인

로컬에서는 잘 작동하는데 배포 후 문제가 생긴다면, 번들 크기나 상태 관리 라이브러리의 버전을 확인해보자.

수정 전 고정할 값

모달 상태를 변경하기 전에, 지금 이 모달이 정확히 어떤 상태인지 로그로 남기자.

같은 문제를 또 겪지 않으려면, 지금 이 모달의 상태 변화를 문서화해두는 게 좋다.