React에서 setTimeout과 setInterval의 성능차이가 궁금합니다.

[문성현]

1

export default function Clock() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    setTimeout(() => {
        setTime(new Date());
      }, 1000);
  });
  return <h1>{time.getHours()}시 {time.getMinutes()}분 {time.getSeconds()}초</h1>;
}

2

export default function Clock() {
  const [time, setTime] = useState(new Date());
  const interval = useRef(null)
  useEffect(() => {
    interval.current = setInterval(() => {
        setTime(new Date());
      }, 1000);
      return () => clearInterval(interval.current)
  });
  return <h1>{time.getHours()}시 {time.getMinutes()}분 {time.getSeconds()}초</h1>;
}

React로 시간을 표시하고 싶어서 1번처럼 코딩하고, 다른 잘하는 분들의 코드를 참조해보니 모두 2번처럼 setTimeout 대신에 setInterval을 사용해서 시간을 표시하시더라구요. 초보자인 제가 생각하기엔 setTimeout을 사용하면 clear과정도 필요 없고 변수도 줄어들어 나을거 같다고 생각이되는데, setInterval을 사용함으로써 얻는 이점이 무엇인지 궁금합니다.

[codingapple]

setTimeout은 1초후에 한번 실행하고 싶을 때 쓰는 코드고

setInterval은 1초마다 한번 실행해달라는 뜻이라 다른 뜻인듯요? 

[문성현]

둘 다 1초마다 시간을 갱신시키는 기능으로 개발하였는데 그 관점에서는 두 코드는 같은 기능을 하는게 아닌가요?

React에서 단순히 setInterval을 사용하면 1초마다 랜더링되는게 아니지 않나요?

[codingapple]

그러네요 둘다 1초마다 재렌더링되겠군요

useEffect(()=>{})는 컴포넌트가 mounted 되고나서 실행됩니다

위의 코드의 경우 mount -> useEffect 실행 -> 1초후 코드실행 -> 재렌더링 -> mount -> useEffect 실행 ... 

이렇게 반복될텐데 

컴포넌트가 재렌더링되는데 시간이 0초 걸릴 수는 없습니다 그래서 계속 실행하면서 오차가 생기겠군요

 

그래서 하단 코드처럼 타이머를 하나 생성해놓고 쓰는게 정확도가 더 나을듯해서 이점이 있을듯요 

근데 하단 코드 useEffect 뒤에 [] 넣어야 맞을 수도 있겠군요 

그런데 setInterval도 항상 정확한건 아닙니다 ms 단위로 오차가 생깁니다 

두 코드 성능은 별 차이 없어보입니다 

 

[문성현]

좋은 답변 감사합니다

[codingapple]

아니네요 어짜피 현재시간은 정확히 new Date() 로 가져오니까 그닥 차이는 없겠군요

암거나 씁시다

 

[글쓴이]

글