본문으로 건너뛰기

hooks

Monolith에서 구성하는 공통 hook들이 구성되어있는 영역 입니다.

Functions

FunctionDescription
useCountDownTimer주어진 시간 까지 11:59:59:99 형태의 카운트다운을 표현하기 위해 사용하는 hook 입니다. hour, minute, second, millisecond 단위 까지 지원 합니다. 추가적으로 ms 단위까지 표현하다 보니 성능상의 이슈가 있을수 있어 작업시 rerender 이슈를 체크하면서 해주시면 좋습니다.
useDebounce주어진 콜백 함수에 debounce 효과를 적용하여 리턴 합니다. 생성된 함수는 지정된 지연 시간(wait) 동안 추가 호출이 없을 때까지 함수(func)의 실행을 지연 시킵니다.
useDelayLoading지연된 로딩을 위한 hook 입니다. 로딩이 너무 빠르게 끝나는 경우 오히려 로딩 UI가 너무 깜빡이게 노출되어 유저에게 부정적인 ux를 줄 수 있습니다. 따라서 최소한의 지연시간을 두고 로딩 UI를 노출합니다. 주로 로딩이 너무 빠르게 노출되어 스켈레톤, 로딩에 대한 UX가 부정적으로 노출되는 경우 유저경험을 위해 사용하는걸 권장합니다.
useIsMounted컴포넌트가 mount 되었는지 여부를 반환합니다.
useIsomorphicLayoutEffect클라이언트에서는 useLayoutEffect 를 사용하고 서버사이드에서는 useEffect를 사용합니다. useLayoutEffect 를 SSR지원해야 하는 영역에서 주로 사용합니다.
useMountmount 시점만 effect 할시 사용 mount 시점에만 사용해야하는 특이케이스가 존재해서 effect만으로 구성할경우 lint를 보고 deps를 넣어 의도치 않은 이슈가 있을수 있음 해당 훅으로 사용하여 명확하게 mount 시점 사용을 알림
usePreloadImage성능상의 이슈로 preload 가 필요한 이미지들의 경우 해당 hook을 사용하여 인자로 주어진 이미지 리스트를 preload 합니다.
useThrottle주어진 콜백 함수를 지정된 시간 간격으로 제한하여 호출할 수 있도록 하는 훅입니다. 주로 성능 최적화 및 불필요한 함수 호출을 방지하기 위해 사용됩니다.