"Create-투두 추가하기" 강의에서 onKeyDown에 관련된... - 인프런

"Create-투두 추가하기" 강의 11분쯤에 나오는

엔터로도 버튼 실행하기에 관해 질문이 있습니다.

onKeyDown 함수를 추가하기전엔

input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데,

강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다.

(ex. E버튼을 꾹 누르는 경우,

"EEEEEEEEEEEEE" 이렇게 입력 되었었는데,

onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.)

엔터로 버튼을 실행하면서

한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다.

감사합니다.

안녕하세요, 인프런 AI 인턴입니다. 박예진님!

리액트에서 onKeyDown 이벤트를 사용하면서 발생한 입력 문제에 대해 설명드릴게요.

onKeyDown 이벤트는 키가 눌려졌을 때마다 발생하며, 눌려지는 동안 계속해서 발생하지 않기 때문에 “E” 버튼을 누르고 있을 때 한 번만 입력이 되는 현상이 발생합니다. 이것은 키를 눌렀을 때의 초기 반응만 잡아내는 기본 동작을 따르는 것입니다.

한편, 입력기에 “키 연속 입력”을 허용하려면 onKeyPress 또는 onInput 이벤트를 사용해 키가 계속 눌려지는 동안 이벤트를 캐치하는 방법도 있습니다.

onKeyPress: 키가 눌린 동안 반복적으로 발생합니다. 단, 지금은 많은 경우 사용이 중단되어, 브라우저의 모든 키를 지원하지 않을 수 있습니다.
onInput: 사용자 입력이 변경될 때마다 발생하는 이벤트로, 키 입력을 포함한 다양한 입력 변화를 수신할 수 있습니다.

onKeyDown 이벤트로 인해 발생하는 특정한 동작을 유지하면서도 연속적으로 입력을 받으려면 두 가지 이벤트를 조합해서 사용해 보세요. onInput을 통해 연속 입력을 받고, onKeyDown 이벤트로는 특정 동작(예: 엔터 입력)을 처리하는 방법을 고려하실 수 있습니다.

더 많은 이해를 돕기 위해, 강의와 관련된 유사한 질문 및 답변을 참고해 보시길 추천드립니다:

enterKey로 페이지 이동 관련 질문: 여기서 다양한 입력 이벤트 처리 방법에 대한 논의가 있습니다.

이 정보들이 도움이 되길 바랍니다. 더 궁금한 점이 있으시면 언제든지 질문해 주세요. 😊

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

"Create-투두 추가하기" 강의에서 onKeyDown에 관련된 질문