Svelte 문법

{DATA||""}

데이터 바인딩 중에서 DATA 변수가 존재하지 않을 경우(null) 빈 문자열을 대신 출력하도록 지정합니다.

이 표현식을 사용하면 데이터가 존재하지 않을 때 디폴트 값을 설정할 수 있으므로, 예기치 않은 오류를 방지하고 

사용자 경험을 향상시킬 수 있습니다. 데이터가 없는 경우에도 빈 문자열이 표시되어 화면에는 

아무 내용도 표시되지 않지만, 오류 없이 렌더링이 되는 것이 특징입니다.

 

{@html DATA}

Svelte 컴포넌트에서 HTML 코드를 삽입하고 원시 HTML을 그대로 렌더링하고자 할 때 사용됩니다.

이 문법을 사용하면 Svelte의 XSS(Cross-Site Scripting) 방어 기능이 적용되지 않으므로, 

신뢰할 수 없는 사용자로부터의 입력을 직접 삽입할 때에는 주의해야 합니다. 

보안 상의 이유로 가능한한 사용을 제한하고, 필요한 경우에만 신중하게 사용해야 합니다.

 

{#if (DATA) === 'IN'}
   <p style="color:red">{DATA}</p>
{:else}
   <p style="color:blue">{DATA}</p>
{/if}

if - else 문

Svelte 템플릿에서 중괄호로 둘러싸인 표현식은 해당 표현식을 평가하고 결과를 렌더링하는 역할을 합니다.

 

{#each alleData as {DATA}}
   {DATA}
{/each}

each 문

each 블록을 사용하여 반복적으로 요소를 생성하는 코드입니다.

each 블록은 배열 또는 이터러블 객체를 반복하면서 요소를 렌더링하는 데 사용됩니다.

{#each allData as {DATA}} 는 allData 배열 또는 이터러블 객체의 각 요소를 반복하면서 {DATA} 변수에

해당 요소의 값을 할당하는 것을 나타냅니다. DATA 는 이 반복 과정에서 사용될 변수의 이름입니다.

반복 과정에서는 allData 의 각 요소에 대해 중괄호 안의 내용을 반복적으로 렌더링합니다.

{DATA} 는 각 반복 단계에서 DATA 변수의 값을 가져와서 렌더링합니다.

이러한 반복은 each 블록의 닫는 태그인 {/each} 가 나올 때까지 계속됩니다.