"Create-투두 추가하기" 강의에서 onKeyDown에 관련된 질문
109
작성자 없음
"Create-투두 추가하기" 강의 11분쯤에 나오는
엔터로도 버튼 실행하기에 관해 질문이 있습니다.
onKeyDown 함수를 추가하기전엔
input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데,
강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다.
(ex. E버튼을 꾹 누르는 경우,
"EEEEEEEEEEEEE" 이렇게 입력 되었었는데,
onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.)
엔터로 버튼을 실행하면서
한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다.
감사합니다.
답변 2
0
안녕하세요 박예진님 이정환입니다.
확인해보니 macos에서 영어 입력 모드에 있는 경우 연속 입력이 발생하지 않는 걸로 보입니다. onKeydown 이벤트 핸들러의 유무와는 관련이 없는것 같아요! 다시 확인해보시면 감사하겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 박예진님!
리액트에서 onKeyDown 이벤트를 사용하면서 발생한 입력 문제에 대해 설명드릴게요.
onKeyDown 이벤트는 키가 눌려졌을 때마다 발생하며, 눌려지는 동안 계속해서 발생하지 않기 때문에 “E” 버튼을 누르고 있을 때 한 번만 입력이 되는 현상이 발생합니다. 이것은 키를 눌렀을 때의 초기 반응만 잡아내는 기본 동작을 따르는 것입니다.
한편, 입력기에 “키 연속 입력”을 허용하려면 onKeyPress 또는 onInput 이벤트를 사용해 키가 계속 눌려지는 동안 이벤트를 캐치하는 방법도 있습니다.
onKeyPress: 키가 눌린 동안 반복적으로 발생합니다. 단, 지금은 많은 경우 사용이 중단되어, 브라우저의 모든 키를 지원하지 않을 수 있습니다.onInput: 사용자 입력이 변경될 때마다 발생하는 이벤트로, 키 입력을 포함한 다양한 입력 변화를 수신할 수 있습니다.
onKeyDown 이벤트로 인해 발생하는 특정한 동작을 유지하면서도 연속적으로 입력을 받으려면 두 가지 이벤트를 조합해서 사용해 보세요. onInput을 통해 연속 입력을 받고, onKeyDown 이벤트로는 특정 동작(예: 엔터 입력)을 처리하는 방법을 고려하실 수 있습니다.
더 많은 이해를 돕기 위해, 강의와 관련된 유사한 질문 및 답변을 참고해 보시길 추천드립니다:
- enterKey로 페이지 이동 관련 질문: 여기서 다양한 입력 이벤트 처리 방법에 대한 논의가 있습니다.
이 정보들이 도움이 되길 바랍니다. 더 궁금한 점이 있으시면 언제든지 질문해 주세요. 😊
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Editor Component의 최적화 불가능 이슈
0
40
2
useCallback ⊂ useMemo
0
38
2
라이브러리 설치 질문
0
35
2
linter 질문
0
42
2
감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유
0
43
2
Sort 메서드 관련 아티클
0
44
2
4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.
0
46
2
html, body에 적용하는 css 스타일 질문입니다.
0
42
2
eslint.config.js 설정 질문입니다.
0
95
2
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
70
1
교재(3쇄)와 강의 내용 문의
0
71
2
12.13) 하단 여백 스타일링 관련 질문 드립니다.
0
94
2
에러 질문드립니다
0
111
2
VSCode 설정 문의
0
145
2
PPT 코드 관련 질문
0
68
2
useEffect와 lifecycle문의
0
93
2
프론트엔드 학습 수준 문의
0
112
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
114
2
데이터 로딩중 화면만 계속 나와요!!
0
103
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
134
2
이후의 커리큘럼 문의
0
157
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
116
2
최적화 관련 질문있습니다 (useMemo 등)
0
134
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
130
3