React onKeyPress

1. React의 onKeyPress
2. React의 onKeyPress 대 onKeyDown
3. React의 onKeyDown

onKeyPress는 텍스트 필드 인터페이스의 일부입니다. React를 포함한 모든 주요 JavaScript 프레임워크에서 사용할 수 있습니다. 이 이벤트 핸들러는 사용자가 필드에 문자, 숫자 또는 다른 것을 입력할 때마다 함수를 실행하려는 경우에 유용할 수 있습니다. 이벤트 실행을 트리거해야 하는 키를 지정할 수도 있습니다.

React의 onKeyPress

MDN의 공식 문서에 따르면 onKeyPress 이벤트는 더 이상 사용되지 않습니다. MDN의 개발자는 사용을 권장하지 않습니다. 그러나 희망을 잃지 마십시오. 실행 가능한 대안이 있습니다. 이에 대해서는 이 기사의 뒷부분에서 논의할 것입니다.

더 이상 사용되지 않는 onKeyPress 이벤트를 사용하려는 경우 React에서 onKeyPress 이벤트를 처리하는 방법은 다음과 같습니다.

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyPress = (e) => {
      if (e.key === 'Enter') {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyPress = {
      this.handleKeyPress
    } />
         </div>);
  }
}

이 솔루션은 React 버전 0.14.7 및 playcode.io React 플레이그라운드에서 작동합니다.

이 솔루션은 이름이 지정된 key 속성을 사용하여 사용자가 Enter 키를 눌렀는지 여부를 확인합니다.

if (e.key === 'Enter') {
  console.log('You must have pressed Enter ')
}

또는 charCode 또는 charKey 속성을 사용하여 사용자가 특정 키를 누른 후 이벤트를 실행할 수도 있습니다. 다시 말하지만, 사용자가 charCode가 13인 Enter 키를 눌렀는지 조건부로 확인하는 방법을 살펴보겠습니다.

코드 예:

if (e.charCode === 13) {
  console.log('You must have pressed Enter ')
}

이전에 사용한 조건문을 이 조건문으로 바꾸면 결과는 동일합니다. 실제로 charCode 속성은 명명된 key 속성보다 브라우저에서 더 널리 지원되기 때문에 사용하기에 더 안전합니다.

keyCode 속성은 예측 가능성이 낮습니다. 위의 예에서 console.log(e.keyCode)인 경우 0이 표시됩니다. 이는 일부 새로운 코딩 환경에서 지원하지 않기 때문입니다. 앱을 코딩하는 동안 이 문제가 발생하면 charCode를 대안으로 사용할 수 있습니다.

React의 onKeyPress 대 onKeyDown

onKeyPress는 HTML 개발자에 의해 더 이상 사용되지 않습니다. 2021년 가을에도 많은 주요 브라우저에서 여전히 지원하지만 최신 브라우저 버전이 출시되면 onKeyPress에 대한 지원이 줄어들 것입니다. 따라서 onKeyPress를 사용해야 하는 특별한 이유가 없는 한 ‘onKeyDown’을 대신 사용하세요. 기본적으로는 같지만 약간의 차이가 있습니다.

keyPress 이벤트는 영숫자 값을 생성하는 키보드 키에 대해서만 발생합니다. 여기에는 공백을 입력하는 데 사용되는 모든 문자, 숫자, 구두점 및 키가 포함됩니다. Alt, Shift 또는 Ctrl과 같은 수정 키는 onKeyPress 이벤트를 실행할 수 없습니다.

onKeyDown은 키를 누를 때마다 실행됩니다. 영숫자 값을 생성하는 키와 생성하지 않는 키 사이에는 차이가 없습니다. Backspace 및 Caps Lock과 같은 키보드 키를 누르면 onKeyDown 이벤트가 생성되지만 onKeyPress는 생성되지 않습니다.

React의 onKeyDown

위에서 언급한 사소한 차이점을 제외하고 onKeyDown 이벤트는 본질적으로 onKeyPress와 동일합니다. 가장 중요한 차이점은 현재 모든 주요 브라우저에서 지원되며 앞으로 몇 년 동안 지원될 것이라는 점입니다.

onKeyDown은 사용하는 React 버전에 관계없이 더 일관성이 있습니다.

다음은 onKeyDown에서 동일한 솔루션이 작동하는 방식입니다.

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyDown = (e) => {
      if (e.keyCode === 13) {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyDown = {
      this.handleKeyDown
    } />
         </div>);
  }
}

onKeyDown 이벤트를 발생시킨 키를 확인하기 위해 onKeyPress로 액세스할 수 없는 keyCode 속성을 사용합니다.

if (e.keyCode === 13) ```

마찬가지로 이름이 지정된 `key` 속성을 사용할 수도 있습니다.

```javascript
if (e.key === 'Enter') ```

어느 쪽이든 입력을 선택하고 <kbd>Enter</kbd>를 두 번 클릭하면 콘솔이 다음과 같이 표시됩니다.

![React의 onKeyDown](</img/React/console onKeyDown.webp>)