{#if ...}

1) 논리 블럭

<script>
let auth = {
	loggedIn: false
}

const handleLogin = () => auth.loggedIn = true

const handleLogout = () =>  auth.loggedIn = false

<script>

<button on:click={handleLogin} >Log In</button>
<button on:click={handleLogout} >log Out</button>

{#if auth.loggedIn === true}
<p> 로그인 중입니다. </p>
{:else }
<p> 로그아웃 중입니다. </p>
{/if}

<script>
let login = true

function handleClick() {
	login = !login // logic 값이 true면 false, 그리고 false true 만들어 주는 간다한 코드입니다. 
}
</script>

<button on:click={handleClick} >호출</button>

{#if login === true}
<p> 현재 login은 참입니다. </p> 
{:else}
<p> 현재 login은 거짓입니다. </p> 
{/if}

if else 이외에 좀 더 복잡한 구조일 경우는 다음과 같이 사용도 가능합니다.

{#if color === 'blue'}
	<p>파랑</p>
{:else if color === 'green'}
	<p>초록</p>
{:else if color === 'red'}
	<p>빨강</p>
{:else}
	<p>기타</p>
{/if}

[만들면서 배우는 Svelte]

만들면서 배우는 svelte