React _ Custom Hooks

kyle kwon·2022년 12월 8일

React

목록 보기

14/15

Prologue

리액트를 활용하여 프로젝트를 구성하다 보면, 나만의 custom hook을 만들어야 하는 경우가 생깁니다. 주로 useState 와 같이 기존 react에서 제공하는 hooks와 연계하여 반복되는 함수로 사용되는 패턴이 보일 경우, 커스텀 훅으로 hooks라는 디렉토리에 별도 저장 후, import 하여 사용합니다. 그렇다면, 유용하게 사용할 수 있는 커스텀 훅 몇 가지에 대해서 알아보겠습니다.

useFocus

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} />
}

useGoBack

import { useCallback } from 'react';
import { useNavigate } from 'react-router';

export const useGoBack = () => {
  const navigate = useNavigate();
  const goBack = useCallback(() => {
    navigate(-1);
  }, [navigate]);
  return goBack;
};

useGoBack 커스텀 훅은 현재 위치(주소) 직전으로 이동할 수 있게 도와주는 훅입니다.

usePrevious

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]);
  // ..
}