[React] Keyboard 이벤트 (Enter Key 검색)

어떤것을 검색하고자 할 때 보통 Enter 키를 사용하거나 마우스로 버튼을 클릭한다.

특정 키를 눌렀을 때 발생하는 이벤트에 대해 처리하는 방법을 알아보자.

키보드 이벤트에 대한 설명은 리액트 사이트에 친절하게 되어있다.

합성 이벤트(SyntheticEvent) – React

 

React Keyboard 이벤트명과 발생 시점은 아래와 같다.

 

onKeyDown : 키를 눌렀을 때 이벤트 발생 후 입력
onKeyPress : 키를 눌렀을 때 이벤트 발생
onKeyUp : 키를 눌렀다가 땠을 때 입력후 이벤트 발생

keydown > keypress > keyup

 

목록 조회를 위한 Enter 키 이벤트 처리가 필요해서 간단하게 정리하고자 한다.

나는 material-ui를 이용해서 개발하고 있기 때문에 TextField에 onKeyPress 이벤트를 추가해준다.

<TextField
  margin="dense"
  id="cdKorNm"
  label="코드한글명"
  type="text"
  fullWidth
  onChange={handleChange}
  onKeyPress={handleKeyPress}
  variant="outlined"
/>

 

handleKeyPress 함수

const handleKeyPress = e => {
  if(e.key === 'Enter') {
  	getDataList();
  }
}

 

위와 같이 설정하면 내용 입력후 엔터키를 누르면 바로 목록 검색이 된다.

추가적인 key 값은 상단에 있는 URL 을 참고하자.