리액트 공부하기 - setInterval

 

🥺 멈춰 시간아 !

---

setInterval은 주어진 시간이 지난 뒤, 특정 작업을 반복해서 실행하게 해주는 함수이다.

 

쉽게 말하면, 일정 시간 간격으로 어떤 작업을 계속해서 실행하도록 설정 하는 것

 

예를 들어, 1초마다 화면에 "Hello"를 출력하고 싶다면,

setInterval을 사용해서 1초마다 그 작업을 반복할 수 있다.

 

예를 들어, 아래와 같다

 

setInterval(() => {
  console.log("Hello");
}, 1000); // 1000ms (1초)마다 실행

이렇게 하면 console.log("Hello")가 1초마다 계속 출력 된다.

 

---

중요한 점:

setInterval은 무한으로 반복되기 때문에, 반복을 멈추고 싶을 때는 clearInterval을 사용해서 멈출 수 있다.

 

예를 들어, setInterval이 반환하는 ID를 저장해두고, 필요할 때 clearInterval(id)를 사용해 반복을 멈출 수 있다.

const intervalId = setInterval(() => {
  console.log("Hello");
}, 1000);

// 5초 후에 반복을 멈추는 예시
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

 

 

"예를 들어, setInterval이 반환하는 ID를 저장해두고, 필요할 때 clearInterval(id)를 사용해 반복을 멈출 수 있다."

이게 무슨 말이냐면 ?

 

→ setInterval 함수는 지정된 시간 간격마다 주어진 함수를 반복 실행하고, 이 함수는 타이머 ID를 반환 !!

→ 이 ID는 나중에 clearInterval을 사용하여 타이머를 멈출 때 필요함 ! 

 

예를 들어:

let timerId = setInterval(() => {
    console.log("Hello!");
}, 1000);  // 1초마다 "Hello!" 출력

// 타이머를 멈추려면
clearInterval(timerId);

timerId는 setInterval이 반환하는 고유한 값이고, 이 값을 clearInterval에 전달하여 반복 실행을 중지할 수 있다

---

시계 구현에서, 인터벌을 사용하는 이유 

인터벌이란, 일정시간 마다 똑같은 일을 반복하는 타이머인데, 이게 시계랑 무슨 상관일까 ?

 

 

✎시계에서 반복하는 건 뭐냐면

사실 시간을 알려주는 동작이에요.

예를 들어:

• 1초마다 초침이 '딱' 움직임
• 1분마다 분침이 '탁' 움직임
• 1시간마다 시침이 '툭' 움직임

이게 다 일정 시간 간격으로 반복되는 동작이야.

---

✎ 자바스크립트 인터벌이랑 비교해보면

자바스크립트에서

setInterval(() => {
  console.log("안녕!");
}, 1000);

이 코드는 1초마다 '안녕!' 이라는 일을 반복하잖아.

이걸 시계에 비유하면 초침이 1초마다 '딱' 움직이는 것과 같아.

 

그러니까 인터벌은 '시간'을 반복하는 게 아니라,
시간마다 어떤 '동작'을 반복하는 거야.

시계는 '초침을 1초마다 한 칸 움직이는 동작'을 반복하고,
코드에서는 'console.log("안녕!")를 1초마다 실행하는 동작'을 반복하는 거지.

 

 

따라서, 00:00:00 처럼 시간, 분, 초를 보여주는 시계는,

사실 1초마다 바뀌는 걸 보여주는 거야.

 

✎ 어떻게 바뀌냐면:

1. 초가 1초마다 바뀌는 동작:
   • 시계에서 초침은 1초마다 한 칸씩 움직여.
   • 그래서 1초가 지나면 초가 1 증가하고, 그럼 화면에 초가 바뀌지.
2. 1분, 1시간도 마찬가지:
   • 초가 60초가 지나면 분이 1 증가하고,
   • 분이 60분이 지나면 시간이 1 증가하는 거야.

✎ 시계의 내부 동작

그 시계는 자동으로 1초마다 시간을 갱신하려고 인터벌을 사용하는 거야.
즉, 시계는 1초마다 '시간'을 계산하고 화면에 다시 그 값을 표시하는 동작을 반복하는 거지.

 

---

📌 핵심 정리

1초마다 바뀌는 시계는 1초마다 '시간'을 갱신하는 동작을 반복하는 시스템
이걸 인터벌을 통해 구현하는 거지!

이해가 좀 더 쉬워졌어? 아니면 더 궁금한 점이 있으면 또 물어봐! 😊