자바스크립트 + 리액트 디자인 패턴

301

Chapter 12_

리액트 디자인 패턴

12.5.2

커스텀

Hook

여기에 리액트에서 기본적으로 제공하는

Hooks

(

useState

,

useEffect

,

useReducer

,

useRef

,

useContext

,

useMemo

,

useImperativeHandle

,

useLayoutEffect

,

useDebug

Value

,

useCallback

) 외에도, 직접 커스텀

Hook

을 손쉽게 만들어 사용할 수 있습니다.

한 눈에 봐도 모든

Hook

이

use

로 시작하는 것을 알 수 있습니다.

Hook

사용 규칙을 잘 따

르고 있는지 리액트가 내부적으로 판단하기 위해서는 반드시

use

로 시작해야 합니다.

사용자가 입력 중에 특정 키를 누르는 이벤트를 추적하고 싶다고 가정해 봅시다. 커스텀

Hook

은 감지할 키를 인자로 받아야 합니다.

그리고 사용자가 인자로 전달한 키에 대해

keydown

및

keyup

이벤트 리스너를 추가합니다.

사용자가 키를 누르면, 즉

keydown

이벤트가 발생하면,

Hook

내부의 상태를

true

로 변경합

니다. 반대로, 사용자가 키를 놓으면

keyup

이벤트가 발생하고 상태를

false

로 변경합니다.

function useKeyPress(targetKey) {

const [keyPressed, setKeyPressed] = React.useState(false); ...