React 폼 에러 메시지를 디버깅하는 흐름

폼 에러 문제는 화면 하나만 보고는 절대 못 푼다. 브라우저, 로그, 네트워크를 세 화면에 띄워놓고 동시에 봐야 진짜 뭐가 빠진 건지 알 수 있다.

에러 상태 생기는 조건을 정확히 재현하기

"에러 메시지가 안 보인다"는 설명은 쓸모없다. "이름 필드에 2글자만 입력하고 다른 필드로 포커스를 옮기면 에러 텍스트가 빨강색으로 떠야 하는데 안 나온다"는 식으로 구체적으로 써야 한다. 이렇게 정확한 재현 조건을 가지고 있으면 문제가 상태 버그인지 렌더링 버그인지 조건부 표시 버그인지 빠르게 좁혀진다.

모바일 폭에서도 바로 확인해보기

데스크톱에서는 에러 메시지가 잘 보이는데 모바일에서는 안 보일 수도 있다. 화면 너비가 좁아지면서 텍스트가 잘리거나, 입력 필드가 에러 표시와 겹칠 수도 있다. 브라우저 개발자도구에서 반응형 디자인 모드를 켜고 여러 폭에서 확인하는 습관을 들여야 한다.

# 개발 서버 시작
npm run build

# 브라우저에서 F12로 개발자도구 열기
# Ctrl+Shift+M (또는 Cmd+Shift+M)으로 반응형 디자인 모드 진입
# 320px, 768px, 1024px 폭에서 폼 입력 시뮬레이션

에러 상태 값과 표시 로직 분리해서 보기

에러 상태가 업데이트되는 건 맞는데 화면에 안 나타나면, 문제는 렌더링 로직이다. 반대로 화면에는 에러 메시지가 빨강색으로 떴는데 실제 폼 제출은 성공해버린다면, 문제는 유효성 검사 로직이다. 두 문제는 고쳐야 할 파일이 전혀 다르다.

확인 후 안전하게 수정하기

에러 메시지 표시를 고칠 때는 한 가지만 바꾼다. 조건부 표시 문법을 고치거나, 에러 상태 이름을 바꾸거나, 스타일을 수정하거나 중 하나만. 그 다음 다시 모바일과 데스크톱에서 재현해본다. 여러 개를 동시에 바꾸면 수정 후에 뭐가 실제로 문제 해결의 원인인지 구분할 수 없다.