[SVELTE] Attributes and props

Attributes and props

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

기본적으로 svelte 에서 element에 attribute 를 적용하는 것은 일반 HTML와 동일합니다.

<input type=checkbox class="">

HTML에서 attribute에 전달하는 값은 문자열일 필요는 없습니다.

<a href="page/{p}">page {p}</a>
<button disabled={!clickable}>...</button>

attribute value는 javascript 표현식을 사용 할 수 있습니다. 혹은 문자열 보간법을 이용하지 않고, 자바사크립트 표현식을 바로 사용 가능합니다.

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

boolean 형식의 attribute는 전달되는 값의 형태에 따라 truthy혹은 falsy로 분류되어 boolean값으로 전달 됩니다.

다른 모든 속성들은 nullish하여, null 혹은 undefined를 기본값으로 가지고 있습니다.

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

보통의 HTML에서는 문자열 속 보간법을 작성하게 되면 Editor에서 코드가 하이라이팅 되며 실패를 암시합니다. 그러나 스벨트에서 문자열 리터럴 속 자바스크립트 표현식은 허용됩니다.

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

만약 이름과 속성이 동일하다면 문법을 단축 할 수 있습니다. (name={name}) 은 {name}으로 단축 할 수 있습니다.

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

문법에 의해서, svelte component로 전달되는 props 또한 attribute 처럼 단축 문법을 이용할 수 있습니다.

<Widget {...things}/>

전개 연산자를 이용한 attribute전달은 전달 하고자 하는 속성을 key로 하는 객체가 존재 할 때 많은 속성을 한번에 전달 할 수 있습니다. 한번에 여러 전개 연산자를 사용하여, 다른 객체의 속성을 전달 하는 것도 가능합니다.

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

$$props는 export 로 선언되어 프롭스로 선언되지 않았지만, component를 통과해 props로 전달되는 것들을 의미 합니다. 이것은 스벨트를 최적화하는데 방해가 되어 추천하는 방법은 아닙니다. 아주 적은 예제에 한하여, 조심스럽게 쓴다면 컴파일 시 어떤 프롭스가 전달 되는지 알 수 있습니다.

<input {...$$restProps}>

$$restprops는 export 로 선언되지 않았지만 전달된 props를 의미 합니다. 이것은 하위 컴포넌트에게 모르는 속성을 전달하기에 유용합니다. 그러나, $$props와 동일한 이유로 추천하지 않습니다.

Note : input 요소나 input의 하위요소인 option으로 value를 bind:group 혹은 bind:checked와 함께 사용하는 경우, 이를 전개 연산자와 함께 쓰면 안됩니다.

#svelte