(21.08.02) setInterval 함수

작은 지식이라도, 하루에 하나씩.

---

setInterval을 대략 묘사한 그림

 

 

한 줄 요약

---

🦄setInterval 함수는 일정한 시간 간격으로 작업을 수행하는데 사용한다.🦄

 

 

setInterval 함수

---

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

WindowOrWorkerGlobalScope.setInterval() - Web APIs | MDN

 

mdn 문서에 따르면 setInterval는 다음과 같이 구성된다.

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);

여기서 func는 매 delay 마다 실행될 콜백 함수, delay는 밀리세컨드 단위로, 반복까지의 텀을 뜻한다.

 

그리고 arg1,arg2...argN의 추가 인수를 줄 수 있는데, 이 친구들은 func이 만료될 때마다 전달되는 인자들이다.

 

보통 setInterval 함수는 매초 지속적으로 실행해야하는 기능에 사용되는데, 게시물의 작성시간을 실시간으로 보여주는데에 사용했다. 

 

const launchTime = () => {
    setInterval(() => {
      let Htime = humanizeTime(props.createDate);
      setHumanTime(Htime);
    }, 1000);
  };
  
  
 useEffect(() => {
    launchTime();
});

 

이렇게 매 초 반복 실행되는 함수를 정의해놓고, useEffect 훅을 사용하여 최초에 컴포넌트가 마운트되었을 때 실행되도록 하면, 자연스럽게 시간에 따라 변하는 타이머를 화면에 표현할 수 있다.