Custom hook vs Function

2021-11-25

popover 컴포넌트에서 Position 값을 받아 방향에 따라 ref의 style값을 조정하는 함수를 만드는 중에 일어난 일이다.
💁🏻‍♂️ : 이거 왜 커스텀훅으로 안만들고 함수로 만드셨나요?
🙍🏻‍♀️(나) : (..)
그래서 정리해보고자 하는 글!
어떨 때 우리는 custom hook을 사용하고 어떨 때 함수를 사용해야하는 걸까?

Custom hook이란?

반복되는 훅 활용 코드들을 자신만의 hook으로 만들어서 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 것.
custom hook의 이름은 무조건 use로 시작해야한다.
(ex. useForm ..)

어떨때 Custom hook을 사용하면 좋을까?

  1. DOM에 대한 직접적인 조작이 있을때
  2. 사이드 이펙트가 있을때 (useRef, useEffect …)
  3. 상태값을 가질때

function 으로 만든 이유

  1. 최상단에서 호출되므로 close일때도 훅이 호출된다.
  2. 파라미터를 전달받고 x, y값을 리턴하는 용도로만 사용되므로 순수함수에 가깝다.
    (동일한 파라미터를 전달했을때 동일한 return값이 나온다.)

결론

무조건 커스텀훅으로 만들지 말고 일반 함수로도 충분하다면 일반 함수로 만들자.