svelte 번역 - 3 - Template Syntax / Basic markup

태그 (Tags)

소문자로 된 태그 <div>는 일반 HTML 요소를 나타냅니다. 대문자로 시작하는 태그, 예를 들어 <Widget> 또는 <Namespace.Widget>은 컴포넌트를 나타냅니다.

<script>
  import Widget from './Widget.svelte';
</script>

<div>
  <Widget />
</div>

속성과 속성 전달 (Attributes and Props)

기본적으로, HTML 요소의 속성은 HTML에서와 동일하게 작동합니다.

<div class="foo">
  <button disabled>can't touch this</button>
</div>

HTML처럼 값이 따옴표 없이도 작성될 수 있습니다.

<input type=checkbox />

속성 값은 JavaScript 표현식을 포함할 수 있습니다.

<a href="page/{p}">page {p}</a>

또는 속성 자체가 JavaScript 표현식일 수 있습니다.

<button disabled={!clickable}>...</button>

불리언 속성은 그 값이 참일 경우 요소에 포함되며, 거짓이면 제외됩니다.

<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>

경우에 따라, HTML 문법이 깨지지 않도록 속성 값에 따옴표를 추가할 수 있습니다. 따옴표는 값의 파싱 방식에 영향을 미치지 않습니다.

<button disabled="{number !== 42}">...</button>

속성 이름과 값이 일치할 때(예: name={name}), 단축형 {name}을 사용할 수 있습니다.

<button {disabled}>...</button>
<!-- 다음과 동일합니다.
<button disabled={disabled}>...</button>
-->

관례적으로, 컴포넌트에 전달되는 값은 속성보다는 '속성(prop)'이라고 합니다. 이는 DOM의 속성 기능과 구별됩니다.

엘리먼트와 마찬가지로 name={name}은 {name} 단축형으로 대체할 수 있습니다.

<Widget foo={bar} answer={42} text="hello" />

속성 확장 (Spread Attributes)

속성 확장을 통해 여러 속성이나 속성을 한 번에 요소나 컴포넌트에 전달할 수 있습니다.

<Widget {...things} />

한 요소나 컴포넌트에 여러 속성 확장을 사용할 수 있으며, 일반 속성과 혼합하여 사용할 수 있습니다.

컴포넌트에 전달된 모든 속성을 참조하려면 $$props를 사용할 수 있습니다. 그러나 특정 속성에 직접 접근하는 것보다는 성능이 떨어질 수 있습니다. 그 이유는 어떤 속성이 변경되었는지 상관없이 Svelte가 모든 $$props의 사용을 다시 확인하기 때문입니다. 하지만 어떤 속성이 컴파일 타임에 전달될지 모르는 경우에는 유용할 수 있습니다.

<Widget {...$$props} />

$$restProps는 export로 선언되지 않은 속성만 포함합니다. 이 값은 컴포넌트 내부에서 다른 알 수 없는 속성을 요소에 전달하는 데 사용할 수 있습니다. 성능 면에서는 $$props와 동일한 특성을 가집니다.

<input {...$$restProps} />

bind:group이나 bind:checked를 사용할 때는 input 요소나 그 자식 option 요소의 value 속성을 확장 속성으로 설정하면 안 됩니다. 이러한 경우, Svelte는 요소의 값을 직접 마크업에서 확인할 수 있어야만 변수와 연결할 수 있습니다.

일부 경우에는 속성 순서가 중요합니다. Svelte는 JavaScript에서 속성을 순차적으로 설정하므로, 예를 들어 <input type="range" min="0" max="1" value={0.5} step="0.1"/>의 경우, Svelte가 먼저 값을 0.5에서 1로 설정한 후 단계(step)를 0.1로 설정하는 문제가 발생할 수 있습니다. 이 문제를 해결하려면 <input type="range" min="0" max="1" step="0.1" value={0.5}/>로 수정해야 합니다.

또 다른 예로 <img src="..." loading="lazy" />가 있습니다. Svelte는 src를 먼저 설정한 후 loading="lazy"를 설정하므로 이미지가 지연 로드되지 않을 수 있습니다. 이를 해결하려면 <img loading="lazy" src="...">로 순서를 변경해야 합니다.

텍스트 표현식 (Text Expressions)

JavaScript 표현식은 중괄호 {}로 감싸서 텍스트로 포함할 수 있습니다.

{expression}

Svelte 템플릿에서 중괄호를 사용하려면 해당 HTML 엔티티 문자열을 사용하세요: {는 {, {, 또는 {, }는 }, }, 또는 }.

정규 표현식 리터럴(예: RegExp)을 사용할 경우, 괄호로 감싸야 합니다.

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

주석 (Comments)

컴포넌트 안에서 HTML 주석을 사용할 수 있습니다.

<!-- 이것은 주석입니다! --><h1>Hello world</h1>

<!-- svelte-ignore -->로 시작하는 주석은 해당 마크업의 다음 블록에 대한 경고를 비활성화합니다. 보통 접근성 관련 경고를 무시할 때 사용되며, 꼭 필요한 경우에만 사용하는 것이 좋습니다.

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus />

Svelte 템플릿에서 주석, 속성 처리, 속성 확장 등 다양한 문법을 통해 유연한 마크업과 컴포넌트 작성이 가능합니다.