[React] 리액트에서 setInterval 사용하기

 

간단한 Timer 컴포넌트의 예시를 보자.

 

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // count 상태 갱신
      setCount(prevCount => prevCount + 1);
    }, 1000); // 1초마다 실행

    // 컴포넌트가 언마운트되면 setInterval 정리(cleanup)
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <h2>Timer: {count}</h2>
    </div>
  );
};

export default Timer;

 

useEffect의 의존성 배열을 빈 배열로 설정하여 컴포넌트가 처음 마운트됐을 때 한 번만 실행되도록 설정하고 컴포넌트가 언마운트될 때  클린업 함수를 통해 인터벌을 종료한다.

 

---

setInterval과 clearInterval의 사용법은 아래 글을 참고하면 된다.

 

[javascript] 일정 간격으로 코드 실행하기 (setInterval, clearInterval)