React 폼 검증이 제대로 작동하는지 확인하기

React에서 폼 검증 문제는 화면 하나만 봐서는 알 수 없다. 로그와 응답을 함께 봐야 원인을 찾을 수 있다.

핵심은 화면에 보이는 에러와 실제 상태가 일치하는지 확인하는 것이다. 검증 로직은 맞는데 UI가 사용자에게 정보를 제대로 전달하지 못할 수 있다.

먼저 제외할 원인들 정리하기

폼이 제출되지 않는 경우 먼저 다음을 확인해본다.

• 제출 버튼이 정말 활성화됐는가
• 폼의 상태(state)가 제대로 업데이트되는가
• 검증 함수가 실제로 호출되는가

브라우저 콘솔에서 상태 값을 직접 찍어보면 많은 문제를 빠르게 발견할 수 있다.

키보드 입력 흐름 확인해보기

모바일과 데스크톱에서 입력 방식이 다를 수 있다.

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

각 입력 필드에 타이핑해서 상태가 업데이트되는지, 검증 메시지가 나타나는지 직접 확인한다. 특히 모바일 가상 키보드가 나타났을 때 폼이 어떻게 보이는지 확인해야 한다.

정상 상태를 먼저 정의하기

어느 정도까지는 정상인지 기준을 정한다. 이 기준이 명확하면 디버깅이 훨씬 쉽다.

• 정상: 빈 필드 + 제출 버튼 비활성화
• 정상: 올바른 입력 + 제출 버튼 활성화
• 정상: 잘못된 입력 + 에러 메시지 표시

비정상일 때 어디를 봐야 할까

에러가 있으면 브라우저 개발자 도구에서 여러 곳을 확인한다.

1. 콘솔에 자바스크립트 에러가 있는가
2. 네트워크 탭에서 요청이 실제로 전송되는가
3. 상태 값이 예상대로 변하는가

각 단계에서 뭐가 이상한지 기록한다.

한 가지씩 수정해보기

검증 로직, 상태 업데이트, UI 표시 중 뭐가 문제인지 한 가지씩 테스트한다.

1. 한 가지 항목 수정
2. npm run build
3. 모바일 폭에서 확인
4. 브라우저 콘솔에서 상태 확인
5. 결과를 기록

이 과정을 반복하면서 정상 동작에 가까워진다. 남겨진 기록이 있으면 다음에 비슷한 버그가 생겼을 때 훨씬 빠르게 처리할 수 있다.