React input태그에서 Enter키로 이벤트 활성화하기

• UX 향상을 위해서 여러가지 고려할 요소가 많다.
• 예를 들면, input 태그에서 입력 후 사용자들은 자연스럽게 엔터키를 누르게 된다.
• input태그에서 enter키를 눌렀을 때 이벤트가 발생하게 하기 위해서는 onKeyDown과 onChange를 활용해야 한다.

import { useState } from "react";

export default function App() {
  const [inputText, setInputText] = useState("");
  const activeButton = () => {
    alert(`${inputText} 입력 완료`);
  }
  const activeEnter = (e) => {
    if(e.key === "Enter") {
      activeButton();
    }
  }
  return (
    <div className="App">
      <input 
        type="text" 
        placeholder="text"
        onChange={(e) => setInputText(e.target.value)}
        onKeyDown={(e) => activeEnter(e)}
      />
      <button onClick={activeButton}>Click</button>
      <h1>text: {inputText}</h1>
    </div>
  );
}

• Enter가 눌리는 것을 탐지하여 그 순간까지 입력받은 텍스트를 가져온다.

• 그리고 이때 버튼에 연결된 것과 같은 함수를 실행시켜줌으로써, 엔터키와 버튼이 같은 기능을 할 수 있도록 한다.