React 폼 입력이 불편할 때 컴포넌트를 점검하는 법

폼 컴포넌트를 분리했는데 입력창에 타이핑할 때 반응이 지연되는 경험이 있을 것 같다. 모바일에서 더 심하다. 문제는 렌더링 횟수나 이벤트 핸들러의 비효율성 때문일 수 있다.

사용자가 보는 모습부터

모바일에서 실제로 입력할 때 어떤 일이 일어나는가. 한 글자를 입력할 때마다 화면이 깜박이는가. 키보드 입력이 버벅이는가.

개발자가 봐야 할 신호

React DevTools를 켜서 불필요한 렌더링이 많은지 본다. 하나의 글자만 입력했는데 여러 컴포넌트가 리렌더링되진 않는가. 상태 업데이트 로직이 효율적인지 확인한다.

이벤트 흐름 확인

폼 입력 → 상태 업데이트 → 리렌더링 이 흐름에서 병목이 어디인지 본다. 로컬과 운영에서 차이가 있는지도 확인한다.

로컬에서 먼저 테스트

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

브라우저 개발자 도구에서 모바일 화면으로 설정하고 입력을 테스트한다. 성능 프로파일러로 시간이 어디에 쓰이는지 본다.

수정 전 고정할 값

현재 상태를 정확히 기록한다. "몇 글자 입력할 때 얼마나 지연되는가", "몇 번의 리렌더링이 일어나는가" 같은 구체적인 값을 측정한다.

검증 루틴

수정 후에도 같은 방법으로 다시 측정한다. 성능이 개선됐는지, 다른 부분에서 새로운 문제가 생기진 않았는지 확인한다. 한 가지만 수정할 때마다 테스트해야 한다.

마지막으로, 해결한 방법을 기록해둔다. 다음에 폼 성능 문제가 생길 때 훨씬 빨리 찾을 수 있다.