TIL 2022-04-19 Svelte Tutorial 1~4

리액트와 유사한 부분은 넘어가고 인상적이었던 부분만 남기자면

 

<p>{@html string}</p>

로 HTML을 직접적으로 렌더링 할 수 있음. 그러나 sanitize하지 않기 떄문에 조심해야됨. React의 dangerousInnerHTML과 동일한데 얘는 이렇게 쉽게 할 수 있음.

 

Svelte에서는 다른 컴포넌트에서 값을 가져와야할때 export를 사용함

<script>
	export let answer;
</script>

<p>The answer is {answer}</p>

이렇게 answer를 export하면

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

<Nested answer={42}/>

다른 컴포넌트에서 import하여 answer를 주입하여 사용할 수 있음. props라고 봐도 될 듯

 

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

html 상에서 특정 로직을 적용할떄 svelte에서는 이런 방식을 적용할 수 있다. Budibase에서 handlebar helper로 위와 같은 것을 만들었었는데 아마 스벨트 로직을 적용한듯?

 

{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if 5 > x}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}

if, else if, else 등 다 쓸 수 있으며 /if문으로 닫아줘야함

 

반복문을 사용할떄는 each를 사용함.

 

{#each things as thing (thing.id)}
	<Thing name={thing.name}/>
{/each}

이런식으로 {#each {배열} as {아이템} ({키})} 로 반복을 돌 수 있다.

 

재밌는점은 svelte에서는 자체적으로 Map을 사용하기 떄문에 key 값으로 객체를 넣어줘도 잘 작동한다는 것이다. 그래도 이왕이면 number, string 값 주는게 좋다. Referential Equality없이 동일성을 유지하기 때문임

 

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

또한 비동기 로직을 이렇게 직관적으로...! 표현할 수 있다. 이거는 진짜 좋아보인다.

 

내일은 6~9,10 까지 봐야겠다.

 

이거 다보고는 한번 스스로 환경 설치랑 국룰인 TODO리스트 만들기 해봐야지