[React] 몇 초 이상 hover 시에 popover 띄우기

목표

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은

1. component가 unmount될 때 작동한다.
2. useEffect의 발동 조건이 달라져서 (dependency change) 이전 effect를 지울 때 사용된다.

이렇게 하면 이전의 필요없는 setTimeout이 사라져서 문제 없다!