packagesreacthooksuseInterval

useInterval

주기적으로 실행되는 타이머를 관리하는 Hook입니다. 데이터 폴링, 실시간 업데이트, 자동 저장 등에 사용됩니다.

Props

이름타입설명기본값
onTick() => void타이머 시간이 되면 실행되는 콜백 함수-
delaynumber타이머 시간 (밀리초)-
disabledboolean타이머를 비활성화할지 여부false
immediateboolean즉시 첫 번째 tick을 실행할지 여부false

Usage

import { useInterval } from '@teamsparta/react';
 
function Example() {
  useInterval({
    onTick: () => console.log('매 초마다 실행'),
    delay: 1000,
  });
 
  return <div>타이머 실행 중...</div>;
}

Example

데이터 폴링

function DataPolling() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
 
  useInterval({
    onTick: async () => {
      setIsLoading(true);
      const newData = await fetchData();
      setData(newData);
      setIsLoading(false);
    },
    delay: 5000, // 5초마다
    immediate: true, // 즉시 첫 번째 요청
  });
 
  return <div>{isLoading ? '로딩 중...' : data}</div>;
}

자동 저장

function AutoSave({ content }) {
  const [lastSaved, setLastSaved] = useState(null);
 
  useInterval({
    onTick: async () => {
      await saveContent(content);
      setLastSaved(new Date());
    },
    delay: 30000, // 30초마다
    disabled: !content, // 내용이 없으면 비활성화
  });
 
  return (
    <div>
      <div>마지막 저장: {lastSaved?.toLocaleString()}</div>
      <textarea value={content} />
    </div>
  );
}

카운트다운 (useTimer훅 사용을 추천해요.)

function Countdown() {
  const [count, setCount] = useState(60);
 
  useInterval({
    onTick: () => setCount((prev) => Math.max(0, prev - 1)),
    delay: 1000,
    disabled: count === 0, // 카운트가 0이 되면 정지
  });
 
  return <div>남은 시간: {count}초</div>;
}

주의사항

  • delay는 0보다 커야 합니다.
  • disabled가 true이면 타이머가 실행되지 않습니다.
  • immediate가 true이면 마운트 시 즉시 첫 번째 tick이 실행됩니다.
  • 컴포넌트가 언마운트되면 자동으로 타이머가 정리됩니다.
  • delay가 변경되면 타이머가 재설정됩니다.
  • 비동기 작업을 수행할 때는 에러 처리를 고려해야 합니다.
useIntersectionObserveruseIsClient