[React][라이브러리 소개] React에서 쉽게 키보드 입력 이벤트를 처리 하는 방법

 

# react-hotkeys-hook - 키보드 입력 및 단축키 이벤트 처리에 유용한 라이브러리

- React로 웹 사이트나 웹 앱 등을 개발 할 때, 생산성 및 편의를 위해서 단축키나 키보드 입력 이벤트에 대한 처리가 필요한 경우가 있습니다. 이번 포스팅에서는 이런 경우 유용한 라이브러리를 소개하려고 합니다

 

사실 이 이미지 한 장이면 설명 끝...

 

# Github 페이지

https://github.com/JohannesKlauss/react-hotkeys-hook

GitHub - JohannesKlauss/react-hotkeys-hook: React hook for using keyboard shortcuts in components.

 

# 사용방법

- 설치합니다

yarn add react-hotkeys-hook

- 아래와 같이 useHotKeys에 키 입력 값을 지정해주고, 콜백 함수를 구현해주면 끝입니다. 또한 Provider를 사용해서 적용될 범위를 결정할 수 있습니다.

const App = () => {
  return (
    <HotkeysProvider initiallyActiveScopes={['settings']}>
      <ExampleComponent />
    </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1), { scopes: ['settings'] })

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

- 위의 예제는 최소한의 사용법이며, 여러 개의 키에 대해 동일한 콜백을 호출하는 등의 다양한 확장이 가능하므로, 아래의 문서 페이지나 옵션에 대한 링크를 참고하시면 좋을 것 같습니다

 

# 문서 사이트

https://react-hotkeys-hook.vercel.app/

Johannes Klauss

---