useEffect 내의 이벤트 핸들러에서 쓰는 상태값은 나중에 상태가 바뀌어도 계속 같은 값만 참조하는 현상 해결하기

	•	useEffect를 dependency 없이 ([]) 등록해놓고
	•	안에서 어떤 이벤트 리스너를 붙임 (예: window.addEventListener, document.addEventListener 등)
	•	그 이벤트 핸들러 안에서는 React state를 사용하고 싶음
	•	문제: 나중에 상태가 바뀌어도, 이벤트 핸들러는 “처음 렌더링 시점”의 값만 계속 참조하고 최신값을 반영하지 않음

  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count;
  }, [count]); // count가 바뀔 때마다 ref 업데이트

  useEffect(() => {
    const handler = () => {
      console.log('최신 count:', countRef.current);
    };

    window.addEventListener('click', handler);
    return () => window.removeEventListener('click', handler);
  }, []);

useEffect(() => {
  const handler = () => {
    console.log('최신 count:', count);
  };

  window.addEventListener('click', handler);
  return () => window.removeEventListener('click', handler);
}, [count]); // count가 바뀔 때마다 이벤트 다시 등록

• “많은 상태 변화가 자주 일어나고”, “핸들러 등록/해제 비용이 크다면” → ref 추천

• “변화가 적거나 단순한 경우” → 핸들러 재등록도 충분히 OK