입력 필드가 반응하지 않을 때 확인할 것들

입력 필드에 텍스트를 치는데 화면에 뜨지 않는다고 했다. 또는 뜨긴 하는데 매우 느렸다. 이런 경우는 대부분 렌더링 문제거나 이벤트 핸들러 실수다.

로컬에서는 문제가 없었는데 배포 후 발생하거나, 모바일에서만 느렸다면 더욱 그렇다.

브라우저에서 직접 테스트

모바일 폭으로 줄여서 확인해본다. 반응형 디자인에서 입력 처리가 달라질 수 있다.

npm run build
# 프로덕션 빌드 후 실제 환경에서 모바일 기기로 접속
# 브라우저 개발자 도구에서 모바일 뷰포트 시뮬레이션

특히 마우스 이벤트와 터치 이벤트가 동시에 발생하면서 충돌하는 경우가 종종 있다.

onChange 핸들러 확인

React DevTools에서 컴포넌트 상태를 본다. 입력할 때마다 상태가 업데이트되는가?

• 상태가 업데이트되지 않는다: onChange 핸들러 자체가 실행 안 됨
• 상태는 업데이트되는데 화면에 안 뜬다: 렌더링 문제

이벤트 리스너 확인

특별한 이벤트 위임(event delegation)이나 중단(event.preventDefault)이 있는지 본다.

# 브라우저 콘솔에서
document.querySelector('input').addEventListener('keydown', (e) => {
  console.log('keydown 발생:', e.key);
});
# 실제로 입력할 때 로그가 나오는가?

부모 엘리먼트에서 포커스를 가로채거나, keydown을 막고 있지는 않은지 확인한다.

성능 측정

React DevTools의 Profiler에서 한 번의 입력으로 얼마나 오래 걸리는지 본다.

• 100ms 이하: 사용자 입장에선 즉각적
• 100~300ms: 약간 느낌
• 300ms 이상: 명백히 느림

느리다면 입력할 때마다 불필요한 컴포넌트까지 다시 그리고 있을 가능성이 높다.

최적화 방법들

1. useMemo/useCallback: 불필요한 재계산 방지
2. React.memo: 부모 리렌더링 때 자식도 다시 그리는 걸 방지
3. 값의 크기: 입력 필드가 아주 크거나, 매번 복잡한 계산을 한다면 쓰로틀링/디바운싱 고려

모바일 환경에서만 느린 경우

모바일은 CPU 성능이 낮으므로, 같은 코드도 느릴 수 있다. 특히:

• 입력할 때마다 전체 리스트를 다시 계산
• 입력할 때마다 API 호출 (디바운싱 안 함)
• 대량의 상태 업데이트

마지막으로, 입력 문제는 보이는 증상만으로는 원인을 알기 어렵다. 이벤트가 나오는지, 상태가 업데이트되는지, 렌더링에 걸리는 시간은 몇 밀리초인지를 따로 측정해야 다음 번에 빠르게 대응할 수 있다.