리액트를 활용하여 프로젝트를 구성하다 보면, 나만의 custom hook을 만들어야 하는 경우가 생깁니다. 주로 useState
와 같이 기존 react에서 제공하는 hooks
와 연계하여 반복되는 함수로 사용되는 패턴이 보일 경우, 커스텀 훅으로 hooks
라는 디렉토리에 별도 저장 후, import
하여 사용합니다. 그렇다면, 유용하게 사용할 수 있는 커스텀 훅 몇 가지에 대해서 알아보겠습니다.
const useFocus = () => {
const [isFocus, setFocus] = useState<boolean>(false)
const onFocus = useCallback(() => setFocus(true), [])
const onBlur = useCallback(() => setFocus(false), [])
return [isFocus, onFocus, onBlur]
}
const Input = () => {
const [value, setValue] = useState<string>('')
const [isFocus, ...focusProps] = useFocus()
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const currentValue = e.target.value;
setValue(currentValue)
}
return <input onChange={handleInputChange} {...focusProps} />
}
import { useCallback } from 'react';
import { useNavigate } from 'react-router';
export const useGoBack = () => {
const navigate = useNavigate();
const goBack = useCallback(() => {
navigate(-1);
}, [navigate]);
return goBack;
};
useGoBack
커스텀 훅은 현재 위치(주소) 직전으로 이동할 수 있게 도와주는 훅입니다.
import { useEffect, useRef } from 'react';
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
export default usePrevious;
위의 커스텀 훅은 이전 렌더링의 값을 기억해두어, 현재 렌더링의 값과 이전 렌더링의 값을 비교할 때 사용합니다.
const CheckPrevAndCurrent = () {
const [state, setState] = useState<string>('a');
const prevAlphabet = usePrevious(state);
const doSomething = () => {};
useEffect(() => {
if (state === 'a' && prevAlphabet === 'b') {
doSomething();
}
}, [state]);
// ..
}
“state"
의 현재값이 'a'
이고, 이전값이 'b'
라면 doSomething
을 수행해라” 라는 로직을 수행하고 있습니다.
유용한 커스텀 훅은 모아놓은 사이트
이렇게 3가지의 유용한 커스텀 훅에 대해서 알아 보았습니다. 위의 훅들 외에도 더 유용한 훅 구현방법이 많은 것으로 알고 있습니다. 리액트로 프로젝트를 구현하는 과정에서 필요한 훅을 만들어서 재사용성에 초점을 맞추는 것이 좋을 것 같습니다.