React 폼 검증이 모바일에서 깨질 때

React에서 폼 검증을 구현할 때 모바일 환경에서 레이아웃이 깨지는 경우가 있다. 에러 메시지가 길어지면 입력 필드를 밀어내거나 텍스트가 겹쳐 보일 수 있다.

처음 보이는 증상부터 기록하기

폼 검증 문제가 반복된다면 확인 순서를 고정해두는 게 낫다. 같은 실수를 반복하지 않기 위해서다.

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

모바일 브라우저에서 다양한 폭과 인풋 상황을 직접 테스트해보면 문제가 명확해진다.

원인을 나누는 기준 세우기

React 폼 검증에서 로컬과 운영 환경의 차이가 자주 숨어 있다. 문제를 마주칠 때 환경 차이까지 같이 적어두면 원인 추적이 쉬워진다.

• 먼저 볼 것: 렌더링 조건과 에러 문구
• 같이 비교할 것: 정상일 때의 폼 레이아웃
• 기록해둘 것: 입력값, 에러 메시지, 뷰포트 너비

이벤트 흐름 확인하기

폼에서 입력이 발생하면 검증 로직이 실행되고 에러가 표시된다. 이 흐름이 제대로 이루어지는지 확인해야 한다.

수정한 후 재검증하기

모바일 폼 검증 문제는 단순한 CSS 수정만으로는 부족할 수 있다.

1. 원래 증상을 모바일에서 재현한다
2. 로그나 응답에서 바뀐 부분을 파악한다
3. 공개 페이지에서 모바일로 다시 테스트해서 최종 확인한다

다음을 위해 남겨두기

다음에 비슷한 증상이 나오면 현재 값을 기록하고 하나씩 비교하면 된다. 어떤 조건에서 에러가 발생하는지, 어떤 뷰포트 너비에서 문제가 생기는지 기록해두면 빠르게 대응할 수 있다.