• 목록

✅ 리액트에서 setInterval 쓸 때 ref 없으면 꼬인다

클로저 문제, 이 패턴으로 해결하자

타이머를 설정하고 내부에서 상태를 변경할 때 흔히 이렇게 한다:

useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

문제는 count가 계속 0으로만 인식됨
→ 초기값만 클로저로 갇혀서 최신 값 반영 안 됨

✅ 해결: ref로 최신 값 유지

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

useEffect(() => {
  const id = setInterval(() => {
    countRef.current += 1;
    setCount(countRef.current);
  }, 1000);
  return () => clearInterval(id);
}, []);

ref를 쓰면 클로저 문제 없이
항상 최신 값을 기준으로 동작한다.
타이머, 웹소켓, 이벤트 리스너 모두 이 방식이 안전하다.