React 모달 컴포넌트 버그 디버깅하기

모달 문제는 어디서부터 봐야 할까

React에서 모달이 안 뜨거나 닫히지 않는 문제는 거의 항상 상태 관리 때문이다. 하지만 로컬에서는 잘 되는데 모바일이나 특정 상황에서만 안 될 수도 있다.

먼저 모바일 폭에서 제대로 동작하는지 확인한다. 브라우저에서 개발자 도구로 모바일 크기로 줄여서 테스트해보자.

상태 흐름을 추적하자

모달이 뜨고 닫히는 과정을 순서대로 따라가야 한다.

먼저 봐야 할 것:

• 모바일 화면에서의 동작
• 정상일 때와의 상태 비교
• 어떤 명령을 실행했을 때의 결과

빌드하고 브라우저에서 확인하기

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

코드를 수정한 뒤에는 반드시 빌드해서 변경사항이 반영되는지 확인한다.

문제를 재현할 수 있게 기록하기

1. 같은 조건에서 증상이 다시 나오는지 확인한다
2. 로그나 응답에서 뭐가 바뀌었는지 정리한다
3. 공개 화면, 빌드 결과, 또는 개발자 도구로 마지막 확인을 한다

다음 버그 때문에 작업이 길어질 필요는 없다

이번에 모달 문제를 고쳤으면 어떤 조건에서 안 됐고 뭘 고쳤는지 적어두자. 다음에 비슷한 증상이 나올 때 처음부터 다시 디버깅할 필요가 없다.