React 폼 입력 문제: 사용자가 데이터를 입력할 수 없을 때

혼자 개발할수록 확인한 값과 바꾼 값을 따로 남기는 습관이 필요하다. 이벤트가 바인딩되지 않으면 사용자는 입력할 수 없지만, 화면상으로는 구분하기 어렵다.

핵심 질문부터

입력 문제를 보면서 지나가고 싶은 마음이 들겠지만, 정확히 뭐가 안 되는지 먼저 정의하자:

• 입력 필드가 보이는가?
• 타이핑할 수 있는가?
• 상태가 업데이트되는가?
• 입력 값이 저장되는가?

local과 운영의 차이가 자주 숨어 있다. 환경 변수나 브라우저 캐시가 다를 수 있으니, 환경 차이까지 같이 적어두자.

먼저 제외할 원인

React 문제라고 해서 모든 상태 관리를 의심하면 안 된다. 화면만 보고 판단하면 놓치는 값이 많다.

logger에서 뭐가 나타나는지 본다. 응답 코드는 뭔지 본다. 설정 중 하나를 증거로 잡아야 한다:

• 먼저 볼 값: 상태 이름과 값
• 같이 비교할 값: 정상일 때의 폼 상태
• 남겨둘 기록: 콘솔 에러, 이벤트 핸들러 호출 여부, 최종 입력 값

이벤트 흐름 확인

입력 주변 문제가 반복된다면 확인 순서를 고정해두는 게 낫다. 매번 감으로 접근하면 같은 실수를 반복한다:

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

빌드가 성공하는지 먼저 확인한다. 빌드 에러가 없어도 runtime에서 이벤트가 안 바인딩될 수 있다.

예상되는 정상 상태

정상일 때는 어떤 상태여야 하는지 정해두자. 입력 필드의 초기값이 뭔지, onChange가 호출되는지, 입력 후 상태가 어떻게 바뀌는지 기록한다.

모바일 vs 데스크톱

모바일과 데스크톱에서 입력 동작이 다를 수 있다. 모바일 폭에서 확인할 때 키보드 이벤트가 제대로 발생하는지 봐야 한다.

실제 화면에서 버튼을 눌렀을 때 정상 상태가 맞는지 확인한다. 같은 증상이 다시 나타나는지도 중요하다.

마무리

한 번에 여러 설정을 바꾸지 않는 것만으로도 원인 추적이 쉬워진다. 비슷한 폼 입력 문제가 다시 생기면, 이번에 기록한 정보를 보면 훨씬 빠르게 대응할 수 있다.