[Javascript & Typescript] Textarea의 값을 엔터키로 제출할 때 엔터가 입력되는 현상 해결

react를 이용한 textarea의 값을 엔터키를 이용해서 제출하는 로직을 작성하는 와중에 엔터를 통해서 값이 제출은 잘 되지만 textarea에 엔터가 한 번 더 입력되어 사용자 경험이 나빠지는 현상이 발생하였다. 물론 전송 버튼(button)을 통한 제출에서는 text가 빈 문자열로 잘 적용되었다.

해결 방법 코드

생략...
const handleKeyPress = (event: any) => {
    if (event.key === "Enter") {
      event.preventDefault();    // ✅ 이 코드를 추가하여 엔터키를 방지한다.
      handleSubmit();            // 필요에 따른 로직을 추가.
    }
};

생략...
return (
생략...
    {/* styled-component로 선언한 textarea */}
    <TextInput
          placeholder="질문을 입력해주세요."
          value={text}
          onChange={handleChange}
          cols={50}
          onKeyPress={handleKeyPress}
    />
);
생략...

event.preventDefault()를 통해서 텍스트 영역에서 Enter 키의 기본 동작을 방지할 수 있다. 엔터키 코드가 감지되면 이벤트 객체의 preventDefault() 메서드를 사용하여 기본 동작을 방지할 수 있다.