Svelte) Basic markup

 

- Tags

: 소문자 태그는 일반적인 HTML 요소를 나타냄

: 대문자로 시작하는 태그는 컴포넌트를 나타냄

- Attributes와 Props

: 기본적으로 속성은 HTML 속성과 동일하게 작동

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

: 값은 따옴표로 묶지 않고 사용 가능

<input type=checkbox />

 

 

: 속성 값에는 JavaScript 표현식을 포함하거나 표현식 사용 가능

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

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

 

: 부울 속성은 값이 truthy이면 요소에 포함되고, falsy이면 제외됩니다.

: 나머지 속성은 값이 nullish(값이 null 또는 undefined)인 경우를 제외하고 포함

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

: 표현식에는 일반 HTML에서 구문 강조 표시가 실패할 수 있는 문자가 포함될 수 있으므로 값에 따옴표를 사용 가능 (따옴표는 값의 구문 분석에 영향을 주지 X)

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

: 속기 속성 : 속성 이름과 값이 일치하는 경우 (name={name}), {name}으로 대체 가능

<button {disabled}>...</button>

<!-- 다음과 같음 -->
<button disabled={disabled}>...</button>

: 속성에 전달되는 값은 DOM의 속성이 아닌 property 또는 props라고 부름

: 요소와 마찬가지로 name={name}은 {name} 단축형으로 대체 가능

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

 

: 스프레드 속성을 사용하면 여러 속성이나 프로퍼티를 한 번에 요소나 컴포넌트에 전달 가능

: 요소나 컴포넌트에는 여러 개의 스프레드 속성과 일반 속성을 번갈아가며 사용 가능

<script>
	const pkg = {
		name: 'svelte',
		speed: 'blazing',
		version: 4,
		website: 'https://svelte.dev'
	};
</script>

<PackageInfo {...pkg} />

 

: $$props는 export로 선언되지 않은 모든 props를 포함하여 컴포넌트에 전달된 props를 참조

: $$props를 사용하면 컴포넌트가 받는 모든 props를 한 번에 전달할 수 있습니다. 이는 코드의 가독성과 유지 보수성을 향상시키는 데 도움된다. 또한, 컴파일 시간에 어떤 props가 컴포넌트에 전달될지 알 수 없는 경우에 유용할 수 있다. 컴포넌트의 props가 변경되어도 코드를 수정할 필요가 없다.

그러나 $$props를 사용할 때 성능에 주의해야 한다. $$props는 모든 props를 다시 확인해야 하므로 특정 prop에 대한 참조보다는 성능이 떨어질 수 있다. 따라서 성능이 중요한 경우에는 특정 prop에 대한 참조를 사용하는 것이 좋다.

<!-- 상위 컴포넌트 -->
<script>
  export let name;
  export let age;
  export let email;
</script>

<!-- $$props를 사용하여 모든 props를 전달 -->
<ProfileCard {...$$props} />


<!-- ProfileCard 컴포넌트 -->
<script>
  export let name;
  export let age;
  export let email;
</script>

<div>
  <h1>{name}</h1>
  <p>Age: {age}</p>
  <p>Email: {email}</p>
</div>

 

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

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

* input 요소의 value 속성 또는 그 자식인 option 요소들의 value 속성은 bind:group 또는 bind:checked를 사용할 때는 spread 속성을 이용하여 설정해서는 안 된다. 이 경우 Svelte는 요소의 값을 직접적으로 마크업에서 확인할 수 있어야 하기 때문이다.

* 속성의 순서가 때로는 중요할 수 있다. Svelte는 JavaScript에서 속성을 순차적으로 설정하기 때문이다. 예를 들어, <input type="range" min="0" max="1" value={0.5} step="0.1"/>의 경우, Svelte는 value를 1로 설정하려고 시도하고 (기본적으로 step은 1이기 때문에 0.5를 반올림하여 1로 설정합니다), 그 후에 step을 0.1로 설정한다. 이를 해결하기 위해서는 <input type="range" min="0" max="1" step="0.1" value={0.5}/>로 변경해야 한다.

* 또 다른 예로 <img src="..." loading="lazy" />가 있다. Svelte는 img 요소의 loading="lazy" 설정 후 src를 설정하기 때문에 이미지가 지연로드되기에는 너무 늦을 수 있다. 이를 해결하기 위해서는 <img loading="lazy" src="...">로 변경해야 한다.

Text Expression

중괄호로 감싸서 JavaScript 표현식을 텍스트로 포함시킬 수 있다.

{expression}

 

 

중괄호는 Svelte 템플릿 내에서 사용하기 위해 HTML 엔티티 문자열인 &lbrace;, &lcub; 또는 &#123;를 사용하여 표시할 수 있다. 중괄호는 &rbrace;, &rcub; 또는 &#125;를 사용하여 표시할 수 있다.

정규 표현식 (RegExp) 리터럴 표기법을 사용하는 경우 괄호로 감싸야 한다.

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

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

 

주석

: 컴포넌트 내에서 HTML 주석을 사용할 수 있다.

<!-- this is a comment! --><h1>Hello world</h1>

svelte-ignore로 시작하는 주석은 다음 마크업 블록에 대한 경고를 비활성화합니다. 일반적으로 이는 접근성 경고다. 경고를 비활성화하는 이유가 충분한지 확인해야한다.

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

 

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

Basic markup • Docs • Svelte