[React] onKeyDown, onKeyUp 이벤트, 한글 입력 시 함수 두 번 실행되는 문제 해결

🔥 발생한 문제

텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️

 

원인 분석

• 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌)
• 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 
• 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다.

 

🧯 해결 방법

nativeEvent 및 React에서 제공하는 CompositionEvent를 사용해서 문제 해결이 가능하다.

 

1️⃣ nativeEvent 사용

import React, { useRef, useState } from 'react';

export default function ToDoList() {
  const [todos, setTodos] = useState(initialValue);

  const textRef = useRef('');

  const handleClick = () => {
    handleAdd();
  };

  // 엔터(Enter) 키를 누름과 동시에 isComposing 프로퍼티의 값이 false인 경우에만 함수 실행
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && e.nativeEvent.isComposing === false) handleAdd();
  };

  const handleAdd = () => {
    const text = textRef.current.value.trim();

    if (text === '') {
      alert('공백을 제외하고 한 글자 이상 입력해주시기 바랍니다.');
      textRef.current.value = '';
      return;
    }

    setTodos([...todos, { id: new Date(), text, status: 'active' }]);
    textRef.current.value = '';
  };

  return (
    <section>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <input
        type='text'
        ref={textRef}
        placeholder='Add Todo'
        onKeyDown={handleKeyDown}
      />
      <button onClick={handleClick}>Add</button>
    </section>
  );
}

const initialValue = [
  { id: '123', text: '장보기', status: 'active' },
  { id: '124', text: '공부하기', status: 'active' },
];

 

2️⃣ CompositionEvent 사용

CompositionEvent 핸들러 함수(onCompositionStart, onCompositionEnd)를 사용하여 isComposing 상태를 별도로 관리함으로써 컴포지션 세션 내에서 이벤트가 발생했는지 여부를 파악할 수 있다. 

import React, { useRef, useState } from 'react';

export default function ToDoList() {
  const [todos, setTodos] = useState(initialValue);
  // isComposing 상태를 별도로 관리
  const [isComposing, setIsComposing] = useState(false);

  const textRef = useRef('');

  const handleClick = () => {
    handleAdd();
  };

  // 엔터(Enter) 키를 누름과 동시에 isComposing 상태가 false인 경우에만 함수 실행
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !isComposing) handleAdd();
  };

  const handleAdd = () => {
    const text = textRef.current.value.trim();

    if (text === '') {
      alert('공백을 제외하고 한 글자 이상 입력해주시기 바랍니다.');
      textRef.current.value = '';
      return;
    }

    setTodos([...todos, { id: new Date(), text, status: 'active' }]);
    textRef.current.value = '';
  };

  return (
    <section>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <input
        type='text'
        ref={textRef}
        placeholder='Add Todo'
        onKeyDown={handleKeyDown}
        onCompositionStart={() => setIsComposing(true)}
        onCompositionEnd={() => setIsComposing(false)}
      />
      <button onClick={handleClick}>Add</button>
    </section>
  );
}

const initialValue = [
  { id: '123', text: '장보기', status: 'active' },
  { id: '124', text: '공부하기', status: 'active' },
];

 

📚 참고한 사이트

Common components (e.g. <div>) – React

KeyboardEvent: isComposing property - Web APIs | MDN

[React] onKeyDown 이벤트 중복으로 2번 실행되는 문제 및 해결방법