React 폼 타입이 엉킬 때 정확히 추적하기

React 폼을 만들다 보면 타입 정의와 실제 렌더링이 맞지 않아서 이상한 일이 일어날 때가 있다. 텍스트를 입력했는데 숫자만 들어가거나, 체크박스는 체크했는데 상태가 바뀌지 않거나, 모바일에서만 문제가 생기는 경우들이다.

렌더링 조건 확인

문제의 첫 단서는 항상 화면이 아니라 렌더링 조건이다. 같은 입력값도 브라우저 폭이나 디바이스에 따라 다르게 작동할 수 있다.

npm run build

로컬에서는 완벽하게 작동하는데 빌드 후에 문제가 생긴다면 Babel 변환 과정에서 뭔가 빠진 것일 수 있다. 따라서 항상 개발 환경이 아닌 프로덕션 빌드 결과를 실제 브라우저에서 테스트해야 한다.

이벤트 흐름 추적

Input 엘리먼트의 value와 onChange 핸들러가 정말 제대로 연결되어 있는지 확인하자. 만약 다음과 같은 코드가 있다면:

const [name, setName] = useState('');

return (
  <input
    value={name}
    onChange={(e) => setName(e.target.value)}
  />
);

콘솔에 실제 값의 변화를 로깅해봐야 한다. 입력이 감지되는지, 상태 업데이트가 일어나는지, 리렌더링이 트리거되는지 각 단계를 확인해야 한다.

모바일 폭 테스트

브라우저 개발자 도구에서 모바일 폭으로 테스트하는 것은 필수다:

# 브라우저 개발자 도구 → Toggle device toolbar (Ctrl+Shift+M)

모바일 화면에서만 문제가 생긴다면 CSS나 레이아웃 문제일 가능성이 높다. 혹은 터치 이벤트와 마우스 이벤트를 다르게 처리해야 할 수도 있다.

에러 메시지 해석

TypeScript나 ESLint 경고를 무시하고 넘어가면 런타임 에러로 돌아온다. 특히 타입 정의가 맞지 않으면:

interface FormData {
  name?: string; // optional
  age: number;
}

위 타입에서 FormData를 초기값으로 할 때 age는 반드시 지정해야 한다. 그렇지 않으면 나중에 폼에서 age를 접근할 때 타입 에러가 난다.

환경 차이 확인

로컬과 운영 환경에서 서로 다른 JavaScript 버전이나 폴리필 설정이 있을 수 있다. 특히 구형 브라우저에서는 최신 JavaScript 문법이 작동하지 않을 수 있다:

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

실제 수정 순서

1. 먼저 로컬에서 현재 상태를 정확하게 파악한다. 어느 입력값이 문제인지 특정하자.
2. 콘솔에 상태 변화를 로깅해서 실제로 값이 변하는지 확인한다.
3. 프로덕션 빌드로 동일한 문제가 재현되는지 본다.
4. 마지막으로 공개 URL에서 정말로 고쳐졌는지 확인한다.

작은 입력 이슈도 사용자 경험을 크게 해친다. 그래서 항상 체계적으로 추적하고 기록해두는 게 중요하다.