react, lodash-es 디바운스 작동 관련 질문입니다

Question

리액트에서 lodash-es 디바운스를 사용하려고 합니다.같은 코드로 작업했을때 vue는 첫 이벤트만받고 debounce 지연시간만큼은 이벤트를 무시하게끔 작업이 되었었는데리액트로는 쓰로틀만 작동하고 디바운스는 작동하지 않습니다 ㅜㅜ 이유를 알수있을까요?const ButtonComponent = forwardRef( ( { children, debounce = -1, throttle = -1, disabled = false, size = "medium", className = "", onClick = () => {}, onMouseEnter = () => {}, onMouseLeave = () => {}, }, ref, ) => { const [isProgress, setIsProgress] = useState(false); const [isDisabled, setIsDisabled] = useState(disabled); /** * 클릭이벤트 */ const onClickEvent = (v) => { onClick(v); }; const onClickDebounced = lodashDebounce( (v) => { onClickEvent(v); }, debounce, { leading: true, trailing: false }, ); const onClickThrottled = lodashThrottle( (v) => { onClickEvent(v); }, throttle, { leading: false }, ); const onClickChild = (v) => { if (debounce > 0) { onClickDebounced(v); } else if (throttle > 0) { onClickThrottled(v); } else { onClickEvent(v); } }; const onMouseEnterChild = (v) => { onMouseEnter(v); }; const onMouseLeaveChild = (v) => { onMouseLeave(v); }; /** * progress 오픈, 클로즈 * @param delay = show 지연시간 * @param duration = show 지속시간 */ const progressShow = ({ delay = 0, duration = 0 } = { delay: 0, duration: 0 }) => { if (delay > 0) { setTimeout(() => { setIsProgress(true); setIsDisabled(true); if (duration > 0) { setTimeout(() => { setIsProgress(false); setIsDisabled(false); }, duration); } }, delay); } else { setIsProgress(true); setIsDisabled(true); if (duration > 0) { setTimeout(() => { setIsProgress(false); setIsDisabled(false); }, duration); } } }; const progressHide = () => { setIsProgress(false); setIsDisabled(false); }; useImperativeHandle(ref, () => ({ progressShow, progressHide, })); return ( ); }, ); Click me!

react, lodash-es 디바운스 작동 관련 질문입니다

0개의 답변

Q&A 목록