React 모달 상태가 꼬였을 때

React에서 모달 상태가 꼬이면 모든 파일이 의심스러워진다. 하지만 문제를 크게 잡으면 손대기 어려워진다. 작은 범위부터 체계적으로 확인해야 한다.

모달 문제는 한 단어만 붙잡지 말고 프론트엔드 UX 전체 흐름에서 원인을 좁혀야 한다.

모달의 목표

모달 자체보다 재현 가능한 단서를 남기는 게 중요하다. 상태 이름을 확인하면 다음으로 볼 범위가 확 줄어든다.

React에서 현재 상태 파악

모달 자체보다 재현 가능한 단서를 남기자. 렌더링 조건을 확인하면 범위가 줄어든다.

• 먼저 볼 것: 렌더링 조건
• 비교할 값: 정상일 때의 상태
• 남길 기록: 명령어 출력, 오류 메시지, 수정한 설정

이벤트 흐름 확인

프론트엔드 UX의 흐름을 먼저 끊어서 봐야 한다. 이벤트 흐름이 애매하면 다른 부분을 고쳐도 결과가 바뀌지 않을 수 있다.

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

React에서 수정 순서

프론트엔드 UX 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 적어두면 원인 추적이 쉬워진다.

모바일 화면 확인

React 문제는 화면만 보고 판단하면 놓친다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

확인 순서:

1. 같은 조건에서 증상이 다시 나오는지 테스트한다
2. 로그나 응답에서 달라진 부분을 설명한다
3. 공개 화면, 빌드 결과, 실제 요청으로 확인한다

다음 액션

해결 자체보다 어떤 값이 달라졌는지 설명할 수 있는 상태가 더 중요하다. 관련 기록을 남겨두면 다음 확인이 훨씬 빨라진다.