React에서 사용자 입력이 반응하지 않을 때

React 애플리케이션에서 사용자가 입력해도 화면에 반응이 없거나 너무 느리게 반응하는 문제가 있다면, 대부분 세 가지 원인 중 하나다: 상태 업데이트 누락, 불필요한 리렌더링, 또는 이벤트 리스너 문제다.

입력 필드 기본 구조 확인

가장 흔한 실수는 이벤트 핸들러 없이 value만 설정하는 것이다:

// 잘못된 예
<input value={name} />

// 올바른 예
<input value={name} onChange={(e) => setName(e.target.value)} />

React에서는 value를 명시하면 onChange가 반드시 있어야 한다.

상태 업데이트 순서 확인

여러 상태를 동시에 업데이트할 때는 순서를 명확히 한다:

const handleSubmit = (e) => {
  e.preventDefault();
  setLoading(true);
  // API 호출
  api.post('/submit', { name }).then(res => {
    setResult(res.data);
    setLoading(false);
  });
};

로딩 상태와 결과 상태를 함께 관리해야 UI가 올바르게 반응한다.

모바일에서 특히 확인할 것

모바일 환경에서는 다음을 확인한다:

# 브라우저 DevTools로 확인
# 1. 입력 필드의 focus 상태
# 2. 터치 이벤트와 click 이벤트의 구분
# 3. 키보드 높이로 인한 뷰포트 변화

특히 iOS에서는 touchstart와 click 사이에 지연이 있을 수 있다.

디버깅 방법

1. 입력값이 상태에 반영되는지 확인:

console.log('Current name:', name);

2. 이벤트 핸들러가 호출되는지 확인:

const handleChange = (e) => {
  console.log('onChange called with:', e.target.value);
  setName(e.target.value);
};

3. 불필요한 리렌더링이 없는지 확인:

console.log('Rendered');

성능 최적화

입력이 많이 일어나는 필드는 useCallback으로 최적화한다:

const handleChange = useCallback((e) => {
  setName(e.target.value);
}, []);

이렇게 하면 부모 컴포넌트가 리렌더링돼도 핸들러 함수는 재생성되지 않는다.

빌드 후 확인

npm run build
npm run start  # 프로덕션 빌드로 테스트

개발 모드에서는 잘 동작하지만 프로덕션 빌드에서 문제가 나기도 한다.