onPressEnter 한글 중복 입력 이슈 해결

문제 발생

• CustomInput 컴포넌트를 사용하는 데 onPressEnter 액션으로 채팅을 보내는 로직에서 한글을 작성하면 두번 입력되는 현상 발생

    → 엔터 액션은 두번 실행됨

해결 과정

1. KeyboardEvent 속성 중 isComposing 속성을 활용
   • 영어를 제외한 다른 언어들은 한 글자에 알파벳 한 개보다 많은 정보를 담고있어, 글자가 처리되기 전에 함수가 실행되고 모두 처리된 후 함수가 다시 실행되어 중복되는 현상이 발생하는 것
   • isComposing 속성을 활용하여 모든 글자가 처리된 후 함수가 실행되도록 한다

   // CustomInput.tsx
   // before
   const onKeyDown = (event: KeyboardEvent) => {
   	if (event.key === 'Enter' && onPressEnter) return onPressEnter()
   };
   
   // after
   const onKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Enter' && onPressEnter && event.nativeEvent.isComposing) return onPressEnter();
   };
   

    

    ⇒ 채팅이 보내지는 함수는 한 번 실행되지만, input 창에 텍스트가 남아있는 side effect 가 발생함

 

2. debounce 를 사용

• debounce 와 throttling
  • debounce : 연이어 호출되는 함수들 중 마지막 함수만 실행되도록 하는 것
  • throttling : 마지막 함수가 실행된 후 일정시간이 지나는 동안 다시 실행되지 않도록 하는 것
  → 주로 디바운스는 검색과 같은 input 이벤트, 쓰로틀링은 스크롤과 같은 이벤트에서 사용됨
• CustomInput 안의 onKeyPress 함수를 lodash 의 debounce 메서드로 감싸준다

// after
const onKeyDown = _.debounce((event: KeyboardEvent) => {
    if (event.key === 'Enter' && onPressEnter) return onPressEnter();
});

⇒ 정상적으로 작동함