React 비제어 입력으로 타이핑 지연 해결하기

문제 상황

• VoC 상세 페이지 댓글 입력 중 커서 멈춤, 한글 조합 깨짐, 일괄 입력 발생
• 재현 시점이 달라 원인 파악이 어려운 간헐적 타이핑 지연

원인 분석

• 최상위 commentText state 갱신에 따른 상세 화면 전체 리렌더
• 렌더마다 다수 호출된 label()의 localStorage 읽기, JSON.parse, 라벨 맵 복사 비용
• 라벨 사전 크기와 화면 문구 수에 비례하는 키 입력 지연

해결 방법

• 댓글 작성 영역 분리 후에도 남은 라벨 호출 비용을 줄이기 위한 ref 기반 비제어 입력 전환
• 제출 시점에만 inputRef.current.value 조회 및 성공 후 직접 초기화
• 최신 accent의 라벨 사전 파싱 결과 메모이즈 확인, 라이브러리 버전 업그레이드 후속 과제

주의할 점

• 비제어 전환 후 빈 입력 비활성화, 실패 시 입력 보존, 중복 등록 방지 동작 별도 유지
• React 18 StrictMode의 state updater 부수효과 중복 실행 주의
• MUI TextField와 react-hook-form 연동 시 inputRef와 register ref 분리