React 폼 검증이 실제 환경에서 다르게 작동할 때

React 폼 검증은 로컬에서는 완벽한데, 배포 후 사용자 입력을 제대로 검증하지 못할 때가 있다. 문제를 크게 보면 모든 파일이 의심스러워지니, 현재 상태부터 명확히 정하고 시작해야 한다.

현재 정상 상태 정의하기

배포하기 전에 로컬에서 폼 검증이 정확히 어떻게 작동하는지 정의하자:

• 빈 필드에서 어떤 에러 메시지가 나타나는가
• 유효하지 않은 이메일을 입력하면 뭐가 일어나는가
• 유효한 값을 입력했을 때는 어떤 상태가 되는가

이런 정상 상태를 스크린샷으로 저장해두면, 배포 후 비교할 기준이 생긴다.

렌더링 조건 확인

React 폼의 검증 로직은 렌더링 조건에 따라 달라질 수 있다. 어떤 상태에서 에러 메시지가 나타나는지 확인하자:

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

특정 뷰포트 너비나 입력 상태에서만 검증이 작동하는 건 아닌지 확인한다.

이벤트 흐름 추적하기

브라우저 개발자 도구의 콘솔에서 입력 이벤트를 로깅해보자. onChange, onBlur, onSubmit이 기대한 순서대로 발생하는지, 각 단계에서 상태가 제대로 업데이트되는지 확인한다.

특히 비동기 검증(API 호출 후 검증)이 있다면, 요청과 응답의 타이밍이 맞는지 봐야 한다.

배포 전 점검 리스트

1. 현재 정상 상태를 명확히 정의 — 각 입력 상황에서의 예상 동작
2. 로컬에서 모든 경우를 테스트 — 빈 필드, 유효하지 않은 값, 유효한 값
3. 렌더링 조건 확인 — 특정 화면 크기나 상태에서만 다르지 않은가
4. 이벤트 흐름 로깅 — 콘솔에서 각 이벤트가 예상 순서대로 나타나는가
5. 모바일에서도 직접 테스트 — 터치 입력과 키보드 입력이 다를 수 있음
6. 배포 후 같은 시나리오로 재테스트 — 검증 결과가 달라지지 않는가

해결한 후에는 어떤 값이 달라졌는지를 기록해두자. 다음에 운영 중 비슷한 증상이 나타나면 훨씬 빠르게 처리할 수 있다.