이제 확인을 위해서 콘솔의 CLEAR를 클릭하고 input 박스의 내용을 a라고 넣어봅시다.
▲ 그림 4-18 컴포넌트 파괴, 생성 확인
그림처럼 input 박스의 값이 변경될 때마다 스크립트 변수의 name이 변경되고 이를 감지한 #key 블록에서는 하위 컴포넌트가 파괴되고 생성되는 것을 확인할 수 있습니다.
App.svelte 코드를 다음과 같이 Component를 #key 블록 밖으로 꺼내면 로그가 출력되지 않으니 비교해보는 것도 좋습니다.
REPL의 App.svelte
<script>
import Component from "./Component.svelte"; // 1. 하위 컴포넌트 임포트하기
let name = "world";
</script>
<input type=text bind:value={name}>
{#key name}
<!-- <Component name={name}/> --> <!-- 2. 컴포넌트 인스턴스 생성하기 -->
{/key}
<Component name={name}/> <!-- 3. #key 블록 밖에서 컴포넌트 인스턴스 생성하기 -->