REACT_Key onKeyDown, onKeyPress, onKeyUp

react 에서는 onKeyDown, onKeyPress, onKeyUp 이벤트도 camelCase 형식의 명칭을 사용한다

onKeyDown과 onKeyPress는 키를 눌렀을 때 동작하고 onKeyUp은 눌러 있던 키에서 손을 뗐을 때 동작한다

 

※ onKeyDown과 onKeyUp는 키를 누르고 떼는 동작 자체에 반응한다

문자 , 숫자, Ctrl, Shift, Alt , F1~F12, Pause, Enter, Scroll Lock 을 인식하고 한/영, Print Screen은 인식하지 못한다

※ onKeyPress 는 onKeyDown 과 달리 문자가 실제로 입력 됐을 때 반응한다

Ctrl, Shift, Alt , F1~F12, Pause, Enter, Scroll Lock , 한/영, Print Screen 등을 인식하지 못한다

 

 

- R071_OnKey.js

import { Component } from "react";

class R071_OnKey extends Component {
    OnKey(event, e) {
        var val = e.target.value;
        console.log('event : ' + event + ", value : " + val);
    }

    render() {
        return (
            <>
            OnKeyDown : <input type="text" 
            onKeyDown = { e => this.OnKey("onKeyDown", e)}/><br/>
            OnKeyPress : <input type="text" 
            onKeyPress = { e => this.OnKey("onKeyPress", e)}/><br/>
            OnKeyUp : <input type="text" 
            onKeyUp={ e => this.OnKey("onKeyUp", e)}/><br/>
            </>
        )
    }
}

export default R071_OnKey;

 

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactOnKey from './R071_OnKey'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactOnKey/>
    </div>
  );
}

export default App;

결과

onkeydown input 박스에 a 입력하면 공백, Ctrl 키 누르면 a

onkeydpress input 박스에 a 입력하면 공백, Ctrl 키 누르면  공백

onkeydup input 박스에 a 입력하면 a , Ctrl 키 눌렀다 떼면  a (2건의 이벤트로 처리된다)

이게 맞아??