React에서 타이머 구현하기: setTimeout과 setInterval 활용

by

React 애플리케이션을 개발하다보면 타이머 기능을 구현해야 하는 경우가 있습니다. 사용자 경험을 향상시키거나 특정 기능을 일정 시간 후에 실행하려면 JavaScript의 setTimeout() 또는 setInterval() 함수를 활용할 수 있습니다. 이 블로그 포스팅에서는 React에서 setTimeout()과 setInterval()을 사용하여 간단한 타이머를 구현하는 방법을 살펴보겠습니다.


setTimeout()을 사용한 타이머

setTimeout() 함수는 일정 시간 후에 함수를 실행하는 데 사용됩니다. 아래는 React에서 setTimeout()을 활용한 타이머의 예제입니다.

import React, { useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  const startTimer = () => {
    setTimeout(() => {
      setSeconds(seconds + 1);
    }, 1000); // 1초 후에 함수 실행
  };

  return (
    <div>
      <h1>타이머: {seconds} 초</h1>
      <button onClick={startTimer}>타이머 시작</button>
    </div>
  );
}

export default Timer;

위의 코드에서 setTimeout() 함수를 사용하여 1초 후에 setSeconds() 함수를 호출하여 타이머 값을 증가시킵니다.


setInterval()을 사용한 타이머

setInterval() 함수는 일정한 간격으로 함수를 반복 실행하는 데 사용됩니다. 아래는 React에서 setInterval()을 활용한 타이머의 예제입니다.

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000); // 1초 간격으로 함수 반복 실행

    return () => {
      clearInterval(intervalId); // 컴포넌트 언마운트 시 타이머 정리
    };
  }, [seconds]);

  return (
    <div>
      <h1>타이머: {seconds} 초</h1>
    </div>
  );
}

export default Timer;

위의 코드에서는 useEffect() 훅을 사용하여 setInterval()을 설정하고, 컴포넌트가 언마운트될 때 clearInterval()을 사용하여 타이머를 정리합니다. 이렇게 하면 메모리 누수를 방지할 수 있습니다.

React에서 setTimeout()과 setInterval() 함수를 활용하면 원하는 시간 간격으로 함수를 실행하거나 일정 시간 후에 함수를 실행할 수 있습니다. 이를 활용하여 다양한 기능을 개발하고 사용자 경험을 향상시킬 수 있습니다.



Leave a Comment