popover 컴포넌트에서 Position 값을 받아 방향에 따라 ref의 style값을 조정하는 함수를 만드는 중에 일어난 일이다.
💁🏻♂️ : 이거 왜 커스텀훅으로 안만들고 함수로 만드셨나요?
🙍🏻♀️(나) : (..)
그래서 정리해보고자 하는 글!
어떨 때 우리는 custom hook을 사용하고 어떨 때 함수를 사용해야하는 걸까?
Custom hook이란?
반복되는 훅 활용 코드들을 자신만의 hook으로 만들어서 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 것.
custom hook의 이름은 무조건 use로 시작해야한다.
(ex. useForm ..)
어떨때 Custom hook을 사용하면 좋을까?
- DOM에 대한 직접적인 조작이 있을때
- 사이드 이펙트가 있을때 (useRef, useEffect …)
- 상태값을 가질때
function 으로 만든 이유
- 최상단에서 호출되므로 close일때도 훅이 호출된다.
- 파라미터를 전달받고 x, y값을 리턴하는 용도로만 사용되므로 순수함수에 가깝다.
(동일한 파라미터를 전달했을때 동일한 return값이 나온다.)
결론
무조건 커스텀훅으로 만들지 말고 일반 함수로도 충분하다면 일반 함수로 만들자.