setinterval 이벤트 관련 문제

React
1

main.js에서

render() {
setInterval(() => {
document.getElementById(“timeZone0”).innerHTML = this.timeCount(+9);
document.getElementById(“timeZone1”).innerHTML = this.timeCount(+2);
}, 1000);
retrun (
…
)
}
이렇게 렌더 되고있습니다.
근데 문제는 다른 라우터로 이동했을때에도 해당 이벤트가 실행되어 콘솔에러를 뱉고있습니다.
어떻게 해야하나요?

2

setInterval 펑션을 state 변수에 담아두고 라이프사이클중 componentWillUnmount 에서 xxx.clearInterval() 로 멈추세요

3

해당컴포넌트에서만 실행되는건데 그럼 다른 라우터에서 전부 라이프사이클에서 clearInterval로 멈춰야하나요??

4

아니요 setInterval을 걸어둔 컴포넌트에서 해야죠 라우터를 통해 다른 path로 이동할때 setInterval 걸어둔 컴포넌트가 unmount되는 컴포넌트 아닌가요?

5

아아… 제가 라이프사이클 이해도가 좀 부족했었나봅니다. componentWillUnmount 라이프사이클 관련해서 좀더 보고 코드를 수정해야겠네요. 대충이해했습니다. 감사합니다~

6

일단 setInterval을 render안에 넣는것는 여러번 호출될 가능성이 있기 때문에 (render는 화면 랜더링이 필요할때마다 실행됩니다. )

componentDidMount 등에서

this.interval = setInterval(() => {
  document.getElementById(“timeZone0”).innerHTML = this.timeCount(+9);
  document.getElementById(“timeZone1”).innerHTML = this.timeCount(+2);
}, 1000);

를 호출하고 unmount 쪽에서
this.interval.clearInterval()

이런식으로 하시면 성능상에 이점이 있을거 같네요.

1개의 좋아요
7

아 setState보단 innerHTML로 넣는것이 성능상 더 좋을까요?

8

그런 의도는 아니였지만 리액트가 추구하는 방향상 innerHTML보다 setState로 넣는게 날거 같습니다.
그리고 제가 예로 적어놓은 것은 나중에 unsubscribe할 interval을 굳이 state에 할당해 놓을 필요는 없다는 이야기입니다. this.interval = 이요