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

안녕하세요. :) 강의 내용중 모호했던 부분이 있었던 것 같습니다.

subscribe에 전달 된 함수가 count 값이 변경될 때 마다 호출이 되는데, subscribe를 사용한 컴포넌트가 화면에서 제거되어도, count 값이 변경되면  subscribe에 전달 된 함수가 실행되기 때문에 컴포넌트가 제거되는 onDestroy에서 해지해야 합니다.

간단한 예제를 첨부하겠습니다.

<!-- App.svelte -->
<script>
  import { onDestroy } from 'svelte';
  import { count } from './stores';

  import Incrementer from './Incrementer.svelte';
  import Decrementer from './Decrementer.svelte';
  import Resetter from './Resetter.svelte';

  let countValue;
  let isShow = true;

  const unsubscribe = count.subscribe(value => countValue = value);

  onDestroy(() => {
    unsubscribe();
  });
</script>

<p>count: {countValue}</p>

<Incrementer />
<Decrementer />
{#if isShow}
  <Resetter />
{/if}
<button on:click={() => isShow = !isShow}>Reset 버튼 제거</button>

<!-- Resetter.svelte -->
<script>
  import { onDestroy } from 'svelte';
  import { count } from './stores';

  const unsubscribe = count.subscribe(value => console.log(value))

  // onDestroy 함수를 주석을 한 후와 주석을 제거한 후의 차이를 비교해 보세요.
  onDestroy(() => {
    unsubscribe();
  });

  function reset (){
    count.set(0);
  }
</script>

<button on:click={reset}>reset</button>

App.svelte와 Resetter.svelte를 위의 코드처럼 수정하고, "Reset 버튼 제거" 버튼을 클릭하면서, Resetter 컴포넌트의 onDestory 라이프 사이클 함수가 정의된 코드와 정의 되지 않은 코드의 로그 출력 결과를 확인하시면 이해하는데 도움이 될 것 같습니다.