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() 함수를 활용하면 원하는 시간 간격으로 함수를 실행하거나 일정 시간 후에 함수를 실행할 수 있습니다. 이를 활용하여 다양한 기능을 개발하고 사용자 경험을 향상시킬 수 있습니다.