[project / react] 엔터(enter) 키 이벤트 적용하기 (onKeyPress event)

🔥 무엇을?

costagram 프로젝트에서 댓글 입력 시 무조건 클릭해야만 작성된 댓글이 제출되도록 구현이 되어있었다.
보통 엔터 키를 이용해 작성한 내용을 제출하는 경향이 있어 엔터키를 이용한 제출(submit)이 가능했으면 싶었다.

👩‍💻 어떻게?

1차 시도

input에 onKeyPress 라는 이벤트를 이용해 누른 키가 엔터인 경우 submit 핸들러를 실행하도록 하여 구현할 수 있다.

keyPress 이벤트는 deprecated 되었다..!
대신 keydown 이벤트를 활용해볼 수 있을 것 같다.
(mdn에서도 keydown을 사용하라고 하고 있다.)

🔗 MDN keyPress 확인하기

2차시도

mdn에서 권장한대로 keydown 이벤트를 적용하여 event가 일어나면 (=키를 누르면) 이벤트가 발생한 키가 Enter인지 확인하여 맞으면 submit함수를 실행하여 댓글이 등록되도록 하였다.

 const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSubmit(); // 작성한 댓글 post 요청하는 함수 
    }
  };

처음엔 기존에 사용되던 handleSubmit이라는 함수에서 엔터키인지 확인하는 조건을 넣어 적용시키고 싶었지만 중복코드를 발생시키지 않고 작성하지 못했고 생각해낸 방법이 위의 코드처럼 handleKeyDown이라는 함수를 생성하여 조건에 부합하면 handleSubmit를 실행시키는 방법이었다..!

나름 중복코드가 발생하지 않게 코드를 짠 것같아 뿌듯했다. 😆

✨ 시연 GIF