[Svelte]생명주기(Lifecycle) - beforeUpdate 함수

beforeUpdate 함수

Svelte의 생명주기 함수인 beforeUpdate() 함수는 컴포넌트의 변경된 값이 DOM에 적용되기 전에 호출됩니다. 즉, 변경된 값이 DOM에 영향이 있으면 호출되고 영향이 없으면 호출되지 않습니다.

 

다음 예제는 간단한 소스 코드입니다. num++ 버튼을 클릭하면 변수 numValue의 값을 1씩 증가시킵니다.

<script>
  import { beforeUpdate } from 'svelte';
  let numValue = 0;

  beforeUpdate(() => {
    console.log('App Component beforeUpdate Call');
  });

  const handleClick = () => {
    numValue++;
  }
</script>

<div>
  <button on:click={handleClick}>
    num++
  </button>
  <p>App: {numValue}</p>
</div>

[실행 결과]

컴포넌트가 DOM에 추가되기 전에 beforeUpdate() 함수가 최초 한 번 실행됩니다.

 

num++ 버튼 클릭 후 변수 numValue의 값이 1씩 증가할 때마다 beforeUpdate() 함수가 호출됩니다.

---

값을 화면에 표시하지 않을 경우

만약, 다음 소스 코드처럼 변수 numValue의 값을 HTML 영역에 표시하지 않는다면 어떻게 동작할까요?

<script>
  import { beforeUpdate } from 'svelte';
  let numValue = 0;

  beforeUpdate(() => {
    console.log('App Component beforeUpdate Call');
  });

  const handleClick = () => {
    numValue++;
  }
</script>

<div>
  <button on:click={handleClick}>
    num++
  </button>
</div>

[실행 결과]

컴포넌트가 DOM에 추가되기 전에 beforeUpdate() 함수가 최초 한 번 실행되고 변수 numValue의 값을 화면에 표시하지 않으므로 numValue의 값이 변경되더라도 beforeUpdate() 함수가 호출되지 않습니다.

---

beforeUpdate 함수가 호출되는 시점

컴포넌트의 변경된 값이 DOM에 적용되기 전에 beforeUpdate() 함수가 호출되는지 자세하게 알아봅시다. 다음 소스 코드는 beforeUpdate() 함수에서 debugger 키워드를 사용합니다.

<script>
  import { beforeUpdate } from 'svelte';
  let numValue = 0;

  beforeUpdate(() => {
    console.log('App Component beforeUpdate Call');
    debugger;
  });
  
  const handleClick = () => {
    numValue++;
  }
</script>


<div>
  <button on:click={handleClick}>
    num++
  </button>
  <p>App: {numValue}</p>
</div>

[실행 결과]

numValue의 값이 변경되면서 beforeUpdate() 함수의 debugger 키워드가 실행되었습니다.

 

디버그 상태에서 numValue의 값이 DOM에 반영되지 않은 것을 확인할 수 있으며, 코드를 계속 실행 후 변경된 numValue의 값이 DOM에 적용되었습니다.

---

정리

• Svelte의 생명주기 함수인 beforeUpdate() 함수는 컴포넌트에서 변경된 값이 DOM에 적용되기 전에 호출되는 함수입니다.
• 컴포넌트에서 변경된 값이 DOM에 영향이 없는 경우 beforeUpdate() 함수는 실행되지 않습니다.
• 컴포넌트가 DOM에 추가되기 전에 최초 한 번 실행됩니다.