> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/4./untitled.md).

# {#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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&amp;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>