[URH-15] useInterval 신규

[suhyeoonn]

👾 Pull Request

• 티켓: useInterval 신규

• 상태: 신규

1️⃣ Spec

• 지정된 시간 간격으로 콜백 함수를 호출하는 타이머를 설정합니다.
• ms 값이 변경될 때마다 interval이 재설정되며, 컴포넌트가 언마운트될 때 자동으로 타이머가 정리됩니다.
• 반환된 clear 함수를 호출하여 수동으로 타이머를 중지할 수도 있습니다.

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

function App() {
  const [count, setCount] = useState(0)
  const [delay, setDelay] = useState(1000)

  const clear = useInterval(() => {
    setCount(count + 1);
  }, delay);

  const handleStop = () => {
    clear()    
  }

  const handleDelay = ({target}) => {
    setDelay(target.value)
  }

  return (
    <div>
      <input type="number" value={delay} onChange={handleDelay} />
      <button onClick={handleStop}>stop</button>
      <div>
        {count}
      </div>
    </div>
  );
}

4️⃣ 관련 문서 (선택 사항)

• 없음

[Choozii]

😻

[bicochan]

고생하셨습니다!

[bicochan]

Suggested change

	const intervalRef = useRef<number | null>(null);
	const intervalRef = useRef<number>(null);

[P2] useRef에는 null이 기본적으로 포함돼 있어서 타입에서 제거할 수 있을 것 같네요!

[suhyeoonn]

타입에서 null을 제거하니 current 에 null 할당 시 Cannot assign to 'current' because it is a read-only property 에러가 발생해서요~!

intervalRef.current = null;

이 글을 참고해보니, null을 지정하지 않으면 RefObject<T> 타입으로 반환되기 때문에 current가 수정 불가능한 것 같습니다👀
지금처럼 타입에 null 을 지정해서 MutableRefObject<T>이 반환되도록 해야할 것 같은데, 혹시 @bicochan 님 의견은 어떠실까요?

[bicochan]

앗 그렇군요...! 제가 이 부분은 정확히 몰랐습니다...😅 수현 님 덕분에 TIL 했네요 ㅎㅎ

그대로 반영해주셔도 좋을 것 같습니다!

[bicochan]

앗 그렇군요...! 제가 이 부분은 정확히 몰랐습니다...😅 수현 님 덕분에 TIL 했네요 ㅎㅎ

그대로 반영해주셔도 좋을 것 같습니다!

[Choozii]

✨