React 폼 검증이 안 먹을 때

React에서 폼 검증 문제는 상태 업데이트 타이밍, 이벤트 핸들러 바인딩, 조건 로직이 복합적으로 작용한다. 작은 실수가 전체 폼을 먹통으로 만들 수 있다.

가장 먼저: 정확히 뭐가 안 되는가

에러 메시지가 안 보이는 건지, 폼이 제출되지 않는 건지, 아니면 제출은 되지만 검증이 안 되는 건지 확인한다. 각각 원인이 다르다.

에러 상태가 정말 업데이트되는가

콘솔에서 검증 함수가 호출되는지, 상태가 실제로 바뀌는지 확인한다. console.log를 여러 지점에 추가해서 실행 흐름을 추적한다.

# 개발 모드에서 리액트 DevTools 사용
# 상태 변화를 실시간으로 모니터링

폼 제출 이벤트 처리

onSubmit 핸들러가 제대로 바인드되어 있는지, 검증 실패 시 e.preventDefault()가 호출되는지 확인한다. 폼 요소의 name 속성도 제대로 설정돼 있어야 한다.

입력 필드와 상태 동기화

React의 controlled component 패턴에서 입력값과 상태가 일치하는지 확인한다. value={state} 와 onChange 핸들러가 쌍을 이루고 있어야 한다.

조건부 렌더링

에러 메시지를 조건부로 렌더링할 때 조건이 정확한지 확인한다. {error && <div>{error}</div>} 같은 패턴에서 error 상태가 제대로 설정되지 않으면 보이지 않는다.

다양한 입력 시뮬레이션

빈 입력, 특수문자, 매우 긴 문자열 등 다양한 케이스를 테스트한다. 특히 비동기 검증(API 호출)이 있다면 요청 중, 완료, 실패 상태를 모두 테스트한다.

# 프로덕션 빌드로 테스트
npm run build
npm run preview  # 또는 serve dist

환경별 차이

로컬 개발 환경과 프로덕션 빌드에서 동작이 다를 수 있다. minification이나 자동 최적화로 인한 문제일 수 있으므로 프로덕션 빌드에서도 테스트한다.

체크리스트

폼 검증 완성 후 다음을 확인:

1. 정상 입력 후 제출 가능한가
2. 잘못된 입력 시 에러 메시지가 보이는가
3. 에러 메시지를 본 후 수정하면 사라지는가
4. 다양한 브라우저와 모바일에서 테스트했는가

이 경험이 쌓이면 나중에 새로운 폼을 만들 때 훨씬 빠르고 정확하게 검증을 구성할 수 있다.