React _ Custom Hooks

kyle kwon·2022년 12월 8일
2

React

목록 보기
14/15
post-thumbnail

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

“state"의 현재값이 'a'이고, 이전값이 'b' 라면 doSomething을 수행해라” 라는 로직을 수행하고 있습니다.



유용한 커스텀 훅은 모아놓은 사이트

https://nikgraf.github.io/react-hooks/



Conclusion

이렇게 3가지의 유용한 커스텀 훅에 대해서 알아 보았습니다. 위의 훅들 외에도 더 유용한 훅 구현방법이 많은 것으로 알고 있습니다. 리액트로 프로젝트를 구현하는 과정에서 필요한 훅을 만들어서 재사용성에 초점을 맞추는 것이 좋을 것 같습니다.



Inspired By

https://jbee.io/react/react-5-component/

https://medium.com/finda-tech/%ED%95%80%EB%8B%A4%EC%97%90%EC%84%9C-%EC%93%B0%EB%8A%94-react-custom-hooks-1a732ce949a5

profile
FrontEnd Developer - 현재 블로그를 kyledot.netlify.app으로 이전하였습니다.

0개의 댓글