Svelte) Special-tags

 

- {@html string}

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

// this string contains some <strong>HTML!!!</strong>
<p>{string}</p>

// this string contains some HTML!!!
<p>{@html string}</p>

: 텍스트 표현식에서는 '< ', '>'와 같은 문자가 이스케이프 처리되지만, HTML 표현식에서는 그렇지 않다.

: 표현식은 독립적으로 유효한 HTML이어야 한다.

: 아래의 코드는 유효한 HTML이 아니기 때문에 동작하지 않으며  Svelte 코드를 컴파일하지도 않는다.

{@html "<div>"}내용{@html "</div>"}

* Svelte는 HTML을 주입하기 전에 표현식을 제거하거나 변형하지 않는다. 데이터가 신뢰할 수 없는 소스에서 왔다면, 반드시 제거되어야 하며, 그렇지 않으면 사용자를 XSS 취약점에 노출시킬 수 있다.

 

- {@debug }

: {@debug ...} 태그는 console.log(...)의 대안을 제공한다. 특정 변수의 값이 변경될 때마다 로그를 출력하고, 개발 도구가 열려 있으면 코드 실행을 일시 중지한다.

: {@debug ...}는 쉼표로 구분된 변수 이름 목록을 받는다(임의의 표현식은 아니다).

 <script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
		};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

 

: 인수 없이 {@debug} 태그를 사용하면, 지정된 변수가 아닌 모든 상태 변경시 트리거되는 디버거 문을 삽입한다.

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

 

- {@const}

: 로컬 상수를 정의

: 아래 예시에서는 각 상자의 너비와 높이를 곱하여 상자의 면적을 계산하고, 이를 area라는 로컬 상수에 할당한다. 그런 다음 이 area 상수를 사용하여 각 상자의 면적을 출력한다. {@const}를 사용하면 각 반복에서 area 상수가 새로 생성되므로, 각 상자의 면적을 독립적으로 계산할 수 있다.

<script>
	export let boxes;
</script>

{#each boxes as box}
	{@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}

{@const}는 {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <Component /> 또는 <svelte:fragment />의 직접적인 자식으로만 허용된다.

 

 

 

Reference) 위 내용은 Svelte 공식 문서의 내용을 번역한 내용입니다.

Special tags • Docs • Svelte