element 위에 mouse hover했을 때, 몇 초가 유지하면 popover를 띄워보자
onMouseEnter
에 다가 setTimeout
을 걸어두니깐 잠까 들어갔다가 나왔는데 몇 초후에 뒷북으로 popover가 생겼다가 사라짐
간단하게 clearTimeout
을 걸어두면 된다. 어디에?? useEffect
에
const Component = () => {
const [hovered, setHovered] = useState(false);
const handleMouseEnter = () => setHovered(true);
const handleMouseLeave = () => setHovered(false);
const action = () => {
// action//
}
useEffect(() => {
const timer = hovered && setTimeout(action, 500);
return () => clearTimeout(timer);
} ,[hovered]) // hovered가 변할 때만 작동하도록
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
</div>
)
}
useEffect
의 return은
useEffect
의 발동 조건이 달라져서 (dependency change) 이전 effect를 지울 때 사용된다.이렇게 하면 이전의 필요없는 setTimeout이 사라져서 문제 없다!