인프런 커뮤니티 질문&답변

영상 마지막 로직에 대해 질문드리려고 문의드립니다.

onMount와 onDestory 함수로
setInterval과 clearInterval을 생명주기에 맞게
실행시키게되어 setInerval과 clearInterval을
한번씩만 실행시키는 거 같은데

$(리액티브선언문) 으로 setInterval과 clearInterval 를 작성 시

setInterval과 clearInterval이 반복적으로 호출되어 생성되었다 지웠다 하는것 같아 보이는데

이 방식이 메모리 영역에서 괜찮은건지 궁금합니다!

<script>
  let intervalEventText;
  let eventIndex = 0;
  const eventText = [
    "영화 정보 업데이트",
    "신규 영화 추가",
    "이벤트 진행중"
  ]

  import { onMount, onDestroy } from 'svelte'

  /** 리액티브 선언문 방식 */
  $: {
    // 이벤트 인터벌 제거
    clearInterval(intervalEventText);

    console.log(eventIndex)

    // 일정 시간 경과 후 eventIndex를 1 증가
    intervalEventText = setInterval(() => {
        eventIndex += 1;
        if (eventIndex >= eventText.length) {
            eventIndex = 0;
        }
    }, 1000);
  }

  /** onMount & onDestory 방식 */
  // onMount(()=>{
  //    intervalEventText = setInterval(() => {
  //       eventIndex += 1;
  //       if (eventIndex >= eventText.length) {
  //           eventIndex = 0;
  //       }
  //   }, 1000);
  // });

  // onDestroy(()=>{
  //   console.log(eventIndex)
  //   clearInterval(intervalEventText);
  // })
</script>

<p>{eventText[eventIndex]}</p>