더북(TheBook)

4.8 {#key 표현식} HTML {/key}

#key 블록은 표현식의 내용이 바뀔 때 블록 안의 콘텐츠를 바뀐 값으로 다시 생성합니다. 새로운 REPL을 열고 코드를 살펴보면서 자세히 알아보겠습니다. svelte.dev 웹 사이트에서 REPL로 이동하여 App.svelte에 다음과 같이 작성하세요.

REPL의 App.svelte
<script>
    let name = 'world';
</script>
<h1>Hello {name}!</h1>

위 코드에서는 name이 바뀌면 {name} 부분만 다시 출력됩니다.

<h1> 자체를 다시 렌더링하고 싶다면 다음 코드처럼 #key 블록을 사용하면 됩니다.

REPL의 App.svelte
<script>
    let name = 'world';
</script>

{#key name}
    <h1>Hello {name}!</h1>
{/key}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.